@charset "UTF-8";

/* ヘッダー */
.header {
	opacity: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

.header.scroll-nav {
	opacity: 1;
}


/* MV */
.mv {
	margin-top: -64px;
}

.mv .mv__content {
	position: relative;
	width: 90%;
	margin: 0 auto;
}

.mv .mv__logo {
	position: absolute;
	top: 24px;
	left: 0;
	max-width: 144px;
}

.mv .mv__catchphrase {
	position: absolute;
	bottom: 64px;
	left: 0;
}

.mv .mv__catchphrase--main {
	font-family: var(--ff_serif_jp);
	font-weight: var(--fw_serif_jp_normal);
	font-size: clamp(24px, 64 / 768 * 100vw, 64px);
	line-height: 1.6;
	letter-spacing: 0.05em;
	text-shadow: 0 0 0.2em var(--color_white);
}

.mv .mv__catchphrase--sub {
	font-family: var(--ff_serif_jp);
	font-weight: var(--fw_serif_jp_normal);
	font-size: clamp(12px, 14 / 768 * 100vw, 14px);
	line-height: 1.6;
	letter-spacing: 0.1em;
}

.mv .mv__img {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: 100vh;
}


/* 捨てられるはずだった灯りにもう一度、命をともす */
.lead .cont-ttl__unit--secondary {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.lead .lead__lead-txt {
	max-width: 960px;
	margin: 0 auto;
}

.lead .lead__content {
	margin-top: 48px;
}

.lead .lead__list {
	display: flex;
	justify-content: center;
	gap: 16px 5%;
}

.lead .lead__list-item {
	width: 30%;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
	overflow: hidden;
}

.lead .lead__list-link {
	display: block;
	text-decoration: none;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}
.lead .lead__list-link:hover {
	opacity: 0.8;
}


/* サステナブル応援商品 */
.sustainable-items .sustainable-items__lead {
	text-align: center;
}

.sustainable-items .sustainable-items__content {
	margin-top: 48px;
	display: flex;
	justify-content: center;
	gap: 24px 5%;
}

.sustainable-items .sustainable-items__item {
	width: 30%;
}

.sustainable-items .sustainable-items__item-txt {
	margin-top: 8px;
	line-height: 1.8;
}

.sustainable-items .sustainable-items__item-name {
	font-weight: var(--fw_jp_normal);
}

.sustainable-items .link-btn__unit {
	display: flex;
	gap: 8px;
}


/* お祈りの場で使用したロウソクを100％使用 */
.project .project__lead {
	max-width: 640px;
	margin: 0 auto;
}

.project .project__content {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	gap: 24px 5%;
	margin-top: 48px;
}

.project .project__img {
	margin-right: calc(50% - 50vw);
	width: calc(58% + calc(50vw - 50%));
	height: 480px;
}

.project .project__item {
	width: 37%;
}

.project .project__item-sub-ttl {
	background-color: var(--color01);
	padding: 0 1em;
	color: var(--color_white);
}

.project .project__item-ttl {
	font-family: var(--ff_serif_jp);
	font-weight: var(--fw_serif_jp_normal);
	font-size: clamp(16px, 24 / 768 * 100vw, 24px);
	line-height: 1.6;
	margin-top: 16px;
}

.project .project__item-desc {
	margin-top: 16px;
}


/* アール・ブリュット（障がい者アート）とのコラボレーション */
.collaboration .collaboration__lead {
	max-width: 640px;
	margin: 0 auto;
}

.collaboration .collaboration__content {
	display: flex;
	flex-direction: column;
	gap: 80px;
	margin-top: 48px;
}

.collaboration .collaboration__inner {
	display: flex;
	justify-content: space-between;
	gap: 24px 5%;
}
.collaboration .collaboration__inner:nth-of-type(odd) {
	flex-direction: row;
}
.collaboration .collaboration__inner:nth-of-type(even) {
	flex-direction: row-reverse;
}

.collaboration .collaboration__img {
	width: 39%;
	height: 480px;
}

.collaboration .collaboration__item {
	width: 56%;
}

.collaboration .collaboration__item-sub-ttl {
	background-color: var(--color01);
	padding: 0 1em;
	color: var(--color_white);
}

.collaboration .collaboration__item-ttl {
	font-family: var(--ff_serif_jp);
	font-weight: var(--fw_serif_jp_normal);
	font-size: clamp(16px, 24 / 768 * 100vw, 24px);
	line-height: 1.6;
	margin-top: 16px;
}

.collaboration .collaboration__item-affiliation {
	color:var(--color_gray02);
}

.collaboration .collaboration__item-desc {
	margin-top: 16px;
}

.collaboration .collaboration__video {
	margin-top: 40px;
}

.collaboration .collaboration__video iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;
}


/* スケッチグラムとは */
.sketchglam .sketchglam__content {
	display: flex;
	justify-content: space-between;
	gap: 24px 5%;
}

.sketchglam .sketchglam__img {
	width: 58%;
}

.sketchglam .sketchglam__item {
	width: 37%;
}

.sketchglam .sketchglam__item-sub-ttl {
	background-color: var(--color01);
	padding: 0 1em;
	color: var(--color_white);
}

.sketchglam .sketchglam__item-ttl {
	font-family: var(--ff_serif_jp);
	font-weight: var(--fw_serif_jp_normal);
	font-size: clamp(16px, 24 / 768 * 100vw, 24px);
	line-height: 1.6;
	margin-top: 16px;
}

.sketchglam .sketchglam__item-desc {
	margin-top: 16px;
}

.sketchglam .link-btn__unit {
	margin-top: 40px;
}

.sketchglam .link-btn__unit .link-btn {
	margin-left: auto;
}


/* 売り上げは次世代支援に */
.ashinaga .ashinaga__lead {
	max-width: 640px;
	margin: 0 auto;
}

.ashinaga .ashinaga__content {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	gap: 24px 5%;
	margin-top: 48px;
}

.ashinaga .ashinaga__img {
	width: 58%;
}

.ashinaga .ashinaga__item {
	width: 37%;
}

.ashinaga .ashinaga__item-sub-ttl {
	background-color: var(--color01);
	padding: 0 1em;
	color: var(--color_white);
}

.ashinaga .ashinaga__item-ttl {
	font-family: var(--ff_serif_jp);
	font-weight: var(--fw_serif_jp_normal);
	font-size: clamp(16px, 24 / 768 * 100vw, 24px);
	line-height: 1.6;
	margin-top: 16px;
}

.ashinaga .ashinaga__item-desc {
	margin-top: 16px;
}

.ashinaga .link-btn__unit {
	margin-top: 40px;
}

.ashinaga .link-btn__unit .link-btn {
	margin-left: auto;
}


/* CTA */
.cta {
	background-image: url(../img/top/cta_bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding: 80px 0;	
}

.cta .cta__content {
	display: flex;
	justify-content: center;
	gap: 24px 4%;
	max-width: 800px;
	margin: 0 auto;
}

.cta .cta__item {
	width: 48%;
}

.cta .cta__shop-logo {
	width: 100%;
	height: 100px;
}

.cta .cta__item-lead {
	color: var(--color_white);
	text-align: center;
	margin-top: 16px;
}

.cta .link-btn__unit a {
	margin: 0 auto;
}


/* ティアのサステナビリティWEBサイトへようこそ */
.foot-banner .foot-banner__link {
	max-width: 640px;
	margin: 0 auto;
	display: block;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}
.foot-banner .foot-banner__link:hover {
	opacity: 0.8;
}


/* フローティングボタン */
.floating-btn {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

.floating-btn .floating-btn__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.floating-btn .floating-btn__link {
	display: block;
	text-decoration: none;
	color: var(--color_white);
	width: 64px;
	background-color: var(--color01);
	padding: 8px;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}
.floating-btn .floating-btn__link:hover {
	background-color: var(--color02);
}

.floating-btn .floating-btn__icon {
	width: 100%;
	max-width: 24px;
	aspect-ratio: 1/1;
	margin: 0 auto;
}

.floating-btn .floating-btn__link-txt {
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}



/* スマートフォン用 */
@media screen and (max-width: 768px) {

	/* MV */
	.mv .mv__logo {
		max-width: 120px;
	}

	.mv .mv__catchphrase {
		bottom: 24px;
	}

	.mv .mv__img {
		max-height: 800px;
	}


	/* 捨てられるはずだった灯りにもう一度、命をともす */
	.lead .lead__content {
		margin-top: 32px;
	}

	.lead .lead__list {
		flex-direction: column;
	}

	.lead .lead__list-item {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}


	/* サステナブル応援商品 */
	.sustainable-items .sustainable-items__content {
		margin-top: 32px;
		flex-direction: column;
	}

	.sustainable-items .sustainable-items__item {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}

	.sustainable-items .sustainable-items__item-txt {
		line-height: 1.6;
	}

	.sustainable-items .link-btn__unit {
		margin-top: 8px;
	}


	/* お祈りの場で使用したロウソクを100％使用 */
	.project .project__content {
		margin-top: 32px;
		flex-direction: column;
	}

	.project .project__img {
		margin-right: 0;
		width: 100%;
		height: 240px;
	}

	.project .project__item {
		width: 100%;
	}


	/* アール・ブリュット（障がい者アート）とのコラボレーション */
	.collaboration .collaboration__content {
		gap: 40px;
		margin-top: 32px;
	}

	.collaboration .collaboration__inner:nth-of-type(odd) {
		flex-direction: column;
	}
	.collaboration .collaboration__inner:nth-of-type(even) {
		flex-direction: column;
	}

	.collaboration .collaboration__img {
		width: 100%;
		height: 240px;
	}

	.collaboration .collaboration__item {
		width: 100%;
	}

	.collaboration .collaboration__video {
		margin-top: 16px;
	}


	/* スケッチグラムとは */
	.sketchglam .sketchglam__content {
		margin-top: 32px;
		flex-direction: column;
	}

	.sketchglam .sketchglam__img {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}

	.sketchglam .sketchglam__item {
		width: 100%;
	}

	.sketchglam .sketchglam__item-ttl {
		font-family: var(--ff_serif_jp);
		font-weight: var(--fw_serif_jp_normal);
		font-size: clamp(16px, 24 / 768 * 100vw, 24px);
		line-height: 1.6;
		margin-top: 16px;
	}

	.sketchglam .link-btn__unit {
		margin-top: 24px;
	}


	/* 売り上げは次世代支援に */
	.ashinaga .ashinaga__content {
		margin-top: 32px;
		flex-direction: column;
	}

	.ashinaga .ashinaga__img {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}

	.ashinaga .ashinaga__item {
		width: 100%;
	}

	.ashinaga .link-btn__unit {
		margin-top: 24px;
	}


	/* CTA */
	.cta {
		padding: 40px 0;	
	}

	.cta .cta__content {
		flex-direction: column;
	}

	.cta .cta__item {
		width: 100%;
	}

	.cta .cta__item-lead {
		color: var(--color_white);
		text-align: center;
		margin-top: 8px;
	}

	.cta .link-btn__unit {
		margin-top: 8px;
	}


}