@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
LP
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- ページヘッダー
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-header {
	position: relative;
	z-index: 0;
}

.lp-header-slider {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.lp-header-slider .img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-header .inner {
	display: flex;
	min-height: 640px;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.lp-header .copy {
	margin-bottom: 6em;
	font-size: 17px;
	font-family: var(--font_serif);
	letter-spacing: 0.1em;
	writing-mode: vertical-rl;
}

.lp-header .heading {
	margin-bottom: 20px;
}

@media (min-width: 768px) {
.lp-header .copy {
	font-size: 20px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Concept
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-concept {
	position: relative;
	z-index: 0;
}

.lp-concept .img {
	position: absolute;
	inset: auto auto 0 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left bottom;
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Handcraft
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-handcraft {
	--content-width: 1340px;
	padding-top: 0;
}

.lp-handcraft .image {
	width: fit-content;
}

.lp-handcraft .image01 {
	max-width: 36%;
	margin-block: -43px -17%;
}

.lp-handcraft .image02 {
	max-width: 59%;
	margin: 0 var(--padding-inline_negative) 20px auto;
}

.lp-handcraft .heading_en {
	margin-bottom: 0;
	font-size: 35px;
}

.lp-handcraft .image03 {
	max-width: 38%;
	margin: 0 0 30px var(--padding-inline_negative);
}

.lp-handcraft .image04 {
	max-width: 42%;
}

.lp-handcraft .image05 {
	max-width: 79%;
}

.lp-handcraft .section-description {
	margin-top: 1.5em;
}

@media (min-width: 768px) {
.lp-handcraft .inner {
	position: relative;
	padding-bottom: var(--padding-block);
}

.lp-handcraft .image01 {
	max-width: 18%;
	margin-bottom: -11%;
	margin-left: 17%;
}

.lp-handcraft .image02 {
	max-width: 37%;
	margin-bottom: -9%;
}

.lp-handcraft .heading_en {
	position: relative;
	z-index: 1;
	margin: 0 0 -8% 11%;
	text-align: left;
}

.lp-handcraft .image03 {
	max-width: 17%;
	margin: 0 0 75px 34%;
}

.lp-handcraft .heading_serif {
	font-size: 20px;
	text-align: center;
}

.lp-handcraft .image04 {
	position: absolute;
	inset: auto 10% 78px auto;
	max-width: 18%;
}

.lp-handcraft .image05 {
	position: absolute;
	inset: auto auto 0 0;
	max-width: 33%;
}
}

@media (max-width: 767.9px) {
.lp-handcraft .heading_serif {
	width: 57%;
	margin-bottom: -150px;
}

.lp-handcraft .image04 {
	margin: 0 0 35px auto;
}

.lp-handcraft .image05 {
	margin-left: var(--padding-inline_negative);
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Designer
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-designer {
	--content-width: 940px;
	background: var(--color_gray_dark);
	color: #fff;
}

.lp-designer .inner {
	display: grid;
	gap: 40px 5%;
}

.lp-designer-image {
	display: flex;
	column-gap: 7%;
}

.lp-designer-image .heading_en {
	font-size: 24px;
	text-align: left;
	writing-mode: vertical-rl;
}

.lp-designer-image figure {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 1em;
	align-items: end;
}

.lp-designer-image .position {
	font-size: 9px;
}

.lp-designer-image .name_ja {
	margin-bottom: 1em;
}

.lp-designer-image .name_en {
	margin: 0 0 -0.6em -2.7em;
	color: var(--color_main);
	font-size: 35px;
	font-family: var(--font_en);
	line-height: 1.1;
	letter-spacing: normal;
}

.lp-designer-text .dl {
	padding: 1em 1.5em;
	border-block: 1px solid var(--color_gray);
}

@media (min-width: 768px) {
.lp-designer .inner {
	grid-template-columns: minmax(auto, 410px) minmax(auto, 440px);
	justify-content: space-between;
	align-items: start;
}

.lp-designer-image .heading_en {
	font-size: 28px;
}
}

@media (max-width: 767.9px) {
.lp-designer .inner {
	justify-items: center;
}

.lp-designer-image figure {
	margin-top: 36px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Media
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-media {
	--content-width: 820px;
	background: #f4f4f4;
}

.lp-media-li {
	width: auto;
	margin-right: 20px;
}

.lp-media-li:last-child {
	margin-right: 0;
}

.lp-media-li .img {
	width: auto;
	height: min(52vw, 328px);
}

.lp-media-li .heading {
	margin-top: 1.2em;
	text-align: center;
}

@media (min-width: 768px) {
.lp-media-li {
	margin-right: 72px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Partnership
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-partnership {
	padding-bottom: 0;
}

.lp-partnership .section-description {
	padding-inline: var(--padding-inline);
}

.lp-partnership-ul {
	max-width: var(--content-width);
	margin-inline: auto;
}

.lp-partnership-li .img {
	width: 100%;
}

.lp-partnership-li .heading {
	display: flex;
	padding: 1em;
	background: #000;
	color: #fff;
	text-align: center;
	justify-content: center;
	align-items: center;
}

@media (min-width: 768px) {
.lp-partnership-ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 2%;
}

.lp-partnership-li .heading {
	height: 128px;
}
}

@media (max-width: 767.9px) {
.lp-partnership-li {
	display: grid;
}

.lp-partnership-li:nth-child(2n+1) {
	grid-template-columns: minmax(auto, 64%) auto;
}

.lp-partnership-li:nth-child(2n) {
	grid-template-columns: auto minmax(auto, 64%);
}

.lp-partnership-li:nth-child(2n) .heading {
	grid-row: 1;
	grid-column: 1;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- お問い合わせ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-contact {
	--content-width: 610px;
	position: relative;
	z-index: 0;
	margin-block: var(--padding-block);
	padding-block: 30px;
	text-align: center;
}

.lp-contact .img {
	position: absolute;
	inset: 0 auto auto 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.lp-contact .text {
	display: flex;
	padding: 24px;
	border: 2px solid var(--color_main);
	background: rgb(255, 255, 255, 0.9);
	flex-flow: column;
	align-items: center;
}

.lp-contact .copy {
	margin-bottom: 0.6em;
	padding: 0.2em 2em;
	background: var(--color_main);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}

.lp-contact .heading {
	border-bottom: 7px solid #ecbdbd;
	margin-block: 0.4em 0.5em;
	font-weight: 700;
	font-size: 34px;
	font-family: var(--font_serif);
	line-height: 0.5;
}

.lp-contact .heading-small {
	font-size: 20px;
}

.lp-contact .heading-medium {
	font-size: 28px;
}

.lp-contact .button {
	display: flex;
	width: min(100%, 400px);
	padding: 0.7em;
	background: #000;
	color: #fff;
	font-size: 15px;
	column-gap: 0.5em;
	justify-content: center;
	align-items: center;
}

.lp-contact .button:hover {
	background: var(--color_main);
}

@media (min-width: 768px) {
.lp-contact {
	padding-block: 45px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- About Bouquet Candle
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-about {
	padding-block: 0;
}

.lp-about-candle {
	display: grid;
	margin-bottom: 30px;
	gap: 20px 9%;
}

.lp-about-candle .heading {
	margin-bottom: 1em;
	font-weight: 700;
	font-size: 16px;
}

.lp-about-ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2%;
}

.lp-about-li {
	display: flex;
	position: relative;
	z-index: 0;
	height: 129px;
	padding: 1em;
	color: #fff;
	text-align: center;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.lp-about-li .img {
	position: absolute;
	inset: 0 auto auto 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-about-li .heading {
	margin-bottom: 0.5em;
	font-weight: 700;
	font-size: 15px;
}

@media (min-width: 768px) {
.lp-about-candle {
	margin-bottom: 70px;
	grid-template-columns: auto auto;
	justify-content: start;
	align-items: center;
}

.lp-about-candle .heading {
	font-size: 18px;
}

.lp-about-li {
	height: 170px;
}

.lp-about-li .heading {
	font-size: 16px;
}
}

@media (max-width: 767.9px) {
.lp-about-candle .text {
	text-align: center;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 理由
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-reason-item {
	max-width: 1400px;
	margin-inline: auto;
}

.lp-reason-item {
	counter-increment: number;
}

.lp-reason-item:not(:first-child) {
	margin-top: var(--padding-block);
}

.lp-reason-item:not(:last-child) {
	margin-bottom: var(--padding-block);
}

.lp-reason-item .heading {
	display: grid;
	margin-bottom: 1em;
	padding-inline: var(--padding-inline);
	font-size: 21px;
	font-family: var(--font_serif);
	letter-spacing: normal;
	grid-template-columns: auto 1fr;
}

.lp-reason-item .heading::before {
	margin-right: 0.2em;
	padding-right: 0.2em;
	border-right: 1px solid;
	color: var(--color_main);
	font-size: 2.3em;
	font-family: var(--font_en);
	line-height: 1.3;
	content: counter(number, decimal-leading-zero);
}

.lp-reason-item figure {
	position: relative;
}

.lp-reason01 .img,
.lp-reason03 .img {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 94% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 90%, 94% 100%, 0 100%);
}

.lp-reason02 .img {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%, 0 90%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%, 0 90%);
}

.lp-reason-item figcaption {
	position: absolute;
	color: var(--color_main);
	font-size: clamp(22px, calc(100vw * 22 / 768), 40px);
	font-family: var(--font_en);
	line-height: 1.1;
	letter-spacing: normal;
}

.lp-reason01 figcaption {
	inset: -0.5em 0.5em auto auto;
	writing-mode: vertical-rl;
}

.lp-reason02 figcaption {
	inset: auto auto -0.5em 1.8em;
}

.lp-reason03 figcaption {
	inset: 0.8em auto auto 0.5em;
}

.lp-reason-item .description {
	padding-inline: var(--padding-inline);
}

.lp-reason01-custom {
	text-align: center;
}

.lp-reason01-custom .heading_serif {
	font-weight: 500;
	letter-spacing: var(--letter-spacing);
	text-decoration: underline;
	text-underline-offset: 0.6em;
}

.lp-reason01-custom-ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
}

.lp-reason01-custom-li {
	display: flex;
	position: relative;
	z-index: 0;
	padding-inline: 1em;
	color: #fff;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1;
}

.lp-reason01-custom-li .img {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.lp-reason01-custom-li .heading {
	font-weight: 700;
	font-size: 15px;
}

.lp-reason01-custom-li .description {
	margin-top: 0.8em;
	line-height: 1.6;
}

.lp-reason02-gallery {
	display: grid;
	max-width: 1400px;
	margin-inline: auto;
	grid-template-columns: 64% 1fr;
}

.lp-reason02-gallery .img01 {
	max-width: calc(100% - var(--padding-inline));
}

.lp-reason02-gallery .img04 {
	max-width: calc(100% - var(--padding-inline));
	margin-bottom: 4px;
}

@media (min-width: 768px) {
.lp-reason-item {
	display: grid;
	column-gap: 5%;
}

.lp-reason01,
.lp-reason03 {
	grid-template-columns: auto minmax(400px, 34%);
	justify-content: start;
}

.lp-reason02 {
	grid-template-columns: minmax(400px, 34%) auto;
	justify-content: end;
}

.lp-reason-item .heading {
	font-size: 26px;
	align-self: end;
}

.lp-reason-item figure {
	grid-row: 1 / 3;
}

.lp-reason02 figure {
	grid-column: 2;
}

.lp-reason-item .img {
	height: 468px;
	object-fit: cover;
}

.lp-reason-item .description {
	align-self: start;
}

.lp-reason01-custom-ul {
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
}

.lp-reason01-custom-li .heading {
	font-size: 18px;
}

.lp-reason02-gallery {
	grid-template-columns: 49% 51%;
}

.lp-reason02-gallery img {
	display: block;
}

.lp-reason02-gallery .img01 {
	max-width: 76%;
	margin: 0 0 -23% auto;
}

.lp-reason02-gallery .img02 {
	position: relative;
	z-index: -1;
	max-width: 36%;
	margin-bottom: -22%;
}

.lp-reason02-gallery .img03 {
	position: relative;
	z-index: 1;
	max-width: 40%;
	margin-inline: auto 4%;
}

.lp-reason02-gallery .img04 {
	max-width: 46%;
	margin: 21% 0 -29% -7%;
}

.lp-reason02-gallery .img05 {
	max-width: 68%;
	margin-left: auto;
}
}

@media (max-width: 767.9px) {
.lp-reason01 figure,
.lp-reason03 figure {
	margin-right: var(--padding-inline);
}

.lp-reason02 figure {
	margin-left: var(--padding-inline);
}

.lp-reason-item .description {
	margin-top: 2em;
}

.lp-reason01-custom .heading_serif {
	font-size: 15px;
}

.lp-reason02-gallery {
	column-gap: 4px;
}

.lp-reason02-gallery01 {
	display: grid;
	grid-template-columns: 42% 1fr;
	gap: 4px;
	justify-items: end;
}

.lp-reason02-gallery02 {
	align-self: end;
}

.lp-reason02-gallery .img01 {
	grid-column: 1 /3;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Gallery
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-gallery {
	background: var(--color_gray_dark);
}

.lp-gallery-li {
	width: 292px;
	max-width: 78%;
}

.lp-gallery-li:not(:last-child) {
	margin-right: 6px;
}

.lp-gallery-li .description {
	margin-top: 1.3em;
	line-height: 1.6;
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Order sample
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-sample .section-description {
	padding-inline: var(--padding-inline);
}

.lp-sample-ul {
	display: grid;
	max-width: var(--content-width);
	margin-inline: auto;
	grid-template-columns: auto auto;
	gap: 20px 6px;
	justify-content: center;
}

.lp-sample-li {
	max-width: 296px;
}

.lp-sample-li .description {
	padding: 1.3em 0.8em 0;
	line-height: 1.6;
}

@media (min-width: 768px) {
.lp-sample-ul {
	grid-template-columns: auto auto auto auto;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- For gift
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-gift {
	background: #edf1f4;
	outline: 1px solid var(--color_main);
	outline-offset: -10px;
}

@media (min-width: 768px) {
.lp-gift {
	position: relative;
	z-index: 0;
	height: 522px;
}

.lp-gift .heading_en {
	text-align: left;
}

.lp-gift .img {
	position: absolute;
	inset: 0 0 auto auto;
	z-index: -1;
	height: 100%;
	object-fit: cover;
}
}

@media (max-width: 767.9px) {
.lp-gift {
	padding-block: 40px 0;
	text-align: center;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- VOICE
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-voice {
	background: url("../img/voice-background.webp") center center / cover no-repeat;
}

.lp-voice-li {
	width: auto;
	max-width: 56%;
	margin-inline: 10px;
	border: 1px solid;
}

@media (min-width: 768px) {
.lp-voice-li {
	margin-inline: 20px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Order flow
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-flow {
	--content-width: 1060px;
	counter-reset: number;
}

.lp-flow-li {
	position: relative;
	padding: 15px 0 20px 70px;
	counter-increment: number;
}

.lp-flow-ul:last-child .lp-flow-li:last-child {
	padding-bottom: 0;
}

.lp-flow-li::before {
	position: absolute;
	inset: 0 auto 0 26px;
	border-right: 2px dotted var(--color_main);
	content: "";
}

.lp-flow-ul:last-child .lp-flow-li:last-child::before {
	display: none;
}

.lp-flow-li::after {
	display: flex;
	position: absolute;
	inset: 0 auto auto 0;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--color_main);
	color: #fff;
	font-size: 26px;
	font-family: var(--font_en);
	letter-spacing: normal;
	content: counter(number, decimal-leading-zero);
	justify-content: center;
	align-items: center;
}

.lp-flow-li .heading {
	margin-bottom: 0.5em;
	font-weight: 700;
	font-size: 15px;
}

.lp-flow-li .description {
	line-height: 1.6;
}

@media (min-width: 768px) {
.lp-flow .wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 10%;
	align-items: end;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- FAQ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-faq {
	--content-width: 820px;
	background: var(--color_gray_dark);
	color: #fff;
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- イントロ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.lp-intro {
	--content-width: 1000px;
	background: url("../img/intro-background.webp") center center / cover no-repeat;
	letter-spacing: normal;
}

.lp-intro-heading {
	text-align: center;
}

.lp-intro-copy {
	margin-block: 1.7em 2.5em;
	font-size: 18px;
	font-family: var(--font_serif);
	text-align: center;
}

.lp-intro-li:not(:last-child) {
	margin-bottom: var(--padding-block);
}

.lp-intro-li .image {
	width: fit-content;
}

.lp-intro-li:nth-child(1) .image {
	max-width: 69%;
	margin: 0 0 -115px var(--padding-inline_negative);
}

.lp-intro-li:nth-child(2) .image {
	max-width: 47%;
	margin: 0 0 -140px auto;
}

.lp-intro-li:nth-child(3) .image {
	max-width: 74%;
	margin: 0 var(--padding-inline_negative) -20px auto;
}

.lp-intro-li:nth-child(1) .text {
	margin-left: 22%;
}

.lp-intro-li:nth-child(2) .text {
	margin-inline: auto 2%;
}

@media (min-width: 768px) {
.lp-intro-copy {
	font-size: 20px;
}

.lp-intro-li:not(:last-child) {
	margin-bottom: -50px;
}

.lp-intro-li:nth-child(1) .image {
	max-width: 36%;
	margin: 0 0 -160px 14px;
}

.lp-intro-li:nth-child(2) .image {
	max-width: 26%;
	margin-bottom: -45px;
}

.lp-intro-li:nth-child(3) .image {
	max-width: 48%;
	margin: 0 0 -150px 0;
}

.lp-intro-li:nth-child(1) .text {
	width: 43%;
}

.lp-intro-li:nth-child(2) .text {
	width: 37%;
}

.lp-intro-li:nth-child(3) .text {
	margin-left: 40%;
}

.lp-intro-li:nth-child(3) .description {
	margin-left: 24%;
}
}

@media (max-width: 767.9px) {
.lp-intro-heading img {
	width: 228px;
}

.lp-intro-li:nth-child(3) .heading_serif {
	margin-left: 1em;
}
}