/*===============================
MARK: root 
=================================*/
:root {
	--fz10: 0.625rem;
	--fz12: 0.75rem;
	--fz13: 0.8125rem;
	--fz14: 0.875rem;
	--fz16: 1rem;
	--fz17: 1.0625rem;
	--fz18: 1.125rem;
	--fz20: 1.25rem;
	--fz22: 1.375rem;
	--fz24: 1.5rem;
	--fz26: 1.625rem;
	--fz28: 1.75rem;
	--fz30: 1.875rem;
	--fz32: 2rem;
	--fz34: 2.125rem;
	--fz36: 2.25rem;
	--fz38: 2.375rem;
	--fz40: 2.5rem;
}

/*===============================
MARK: common
=================================*/
html {
	scroll-behavior: smooth;
	scroll-padding-top: 30px;
}

body {
	position: relative;
	overflow-x: hidden;
	font-family: 'Zen Kaku Gothic New', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
		'Hiragino Sans', Meiryo, sans-serif;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	color: #fff;
}

a {
	transition: 0.3s;
}

a:hover {
	opacity: 0.8;
}

img {
	width: 100%;
}

.f-en,
.f-en * {
	font-family: 'Outfit', sans-serif;
}

.container {
	position: relative;
	width: 100%;
	max-width: 1166px;
	margin-inline: auto;
	padding-inline: 35px;
	z-index: 1;
}

.d-flex {
	display: flex;
	align-items: start;
	justify-content: start;
}

.pc-content {
	display: block;
}

.sp-content {
	display: none;
}

.indent1em {
	text-indent: -1em;
	margin-left: 1em;
}

.indent2em {
	text-indent: -2em;
	margin-left: 2em;
}

.text-center {
	text-align: center !important;
}

.text-right {
	text-align: right !important;
}

.c-white,
.c-white * {
	color: #fff;
}

.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.6s ease-out;
}

.fade-in.active {
	opacity: 1;
	transform: translateY(0);
}

h3.f-en {
	letter-spacing: 0.07em;
}

h4 span.f-en {
	letter-spacing: 0.07em;
}

/*===============================
MARK: ボタン
=================================*/

.btn {
	position: relative;
	display: inline-flex;
	justify-content: end;
	align-items: center;
	line-height: 1;
	text-decoration: none;
	min-width: 295px;
	/* 共通幅 */
	padding: 0.75em 0.75em 0.75em 2em;
	font-size: var(--fz18);
	font-weight: 500;
	color: #fff;
	background: #1A3755;
	border: 2px solid #D18B47;
	text-align: center;
	border-radius: 5rem;
}

.btn::after {
	content: '';
	width: 48px;
	height: 48px;
	background-image: url(/cms/contents/lp/sunglasses_a/img/arrow-r-btn.svg);
	background-size: cover;
	filter: drop-shadow(0 0 1.2rem #0E2843);
	margin-left: 35px;
}

.btn02-wrap {
	display: contents;
	width: 20%;
}

.btn02 {
	position: relative;
	color: #fff;
	font-size: var(--fz18);
	text-decoration: none;
	padding: 15px 40px 15px 0;
	border-bottom: 1px solid #fff;
}

.btn02::after {
	position: absolute;
	right: 0;
	content: "";
	width: 30px;
	height: 30px;
	background-image: url(/cms/contents/lp/sunglasses_a/img/arrow-r.svg);
	background-size: contain;
}

/*===============================
MARK: header
=================================*/
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	width: 100%;
	z-index: 1;
}

.header-inner {
	width: 100%;
	margin-inline: auto;
	padding-inline: 34px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.site-logo {
	padding: 34px 0 0 0;
}

/*===============================
MARK: Page Frame
=================================*/
.page-frame {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	border: 20px solid #752B2C;
	pointer-events: none;
	z-index: 999;
}

/*===============================
MARK: MV
=================================*/
.main-visual {
	position: relative;
	width: 100%;
}

.mv-img {
	position: relative;
	width: 100%;
	height: 100%;
}

.mv-img img {
	display: block;
	height: calc(100vh + 55px);
	object-fit: cover;
	object-position: center top;
}

.site-ttl {
	position: absolute;
	bottom: 130px;
	left: 50%;
	transform: translateX(-50%);
	filter: drop-shadow(0 0 1.7rem #120809);
}

/*===============================
MARK: MAIN-CONTENT
=================================*/
.brand-read h2 {
	width: 656px;
	margin: 0 auto 60px;
}

.brand-read p {
	text-align: center;
	font-size: 21px;
	color: #fff;
	line-height: 2.5;
	letter-spacing: 3.5px;
}

.brand-img .img-wrap img {
	display: block;
}

.brand-detail {
	padding-top: 100px;
}

.brand-detail .d-flex {
	align-items: end;
	gap: 75px;
}

.brand-detail .d-flex:first-of-type {
	justify-content: space-between;
}

.brand-detail .d-flex:last-of-type {
	gap: 40px;
	align-items: start;
	margin-top: 45px;
}

.brand-name {
	font-size: clamp(1.375rem, calc(0.75rem + 2.5vw), 2.4375rem);
	letter-spacing: 0.07em;
}

.brand-img {
	width: 50%;
}

.col-text {
	white-space: nowrap;
}

.col-image {
	width: 23%;
}

.col-text p {
	margin-top: 1.8em;
	font-size: var(--fz14);
	font-weight: 600;
	line-height: 2.2;
}

.col-image img {
	display: block;
}

/* スライダーページネーション調整 */
.splide__pagination {
	display: flex;
	justify-content: start;
	gap: 15px;
	padding-right: 0;
	bottom: -35px;
	padding: 0;
}

.splide__pagination__page {
	width: 12px;
	height: 12px;
	background-color: #dce0e3;
	border-radius: 50%;
	transition: background-color 0.3s;
	opacity: 1;
	margin: 0;
}

.splide__pagination__page.is-active {
	background-color: #697581;
	opacity: 1;
	transform: scale(1);
}

.brand01-wrap,
.brand02-wrap,
.brand03-wrap,
.brand04-wrap {
	position: relative;
	background-size: cover;
	background-repeat: repeat-y;
}

.brand01-wrap {
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand01_bg.png);
	color: #1A3755;
	padding: 100px 0 80px;
}

.brand02-wrap {
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand02_bg.png);
	color: #F3E8A3;
	padding: 100px 0 0;
}

.brand03-wrap {
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand03_bg_1.svg), url(/cms/contents/lp/sunglasses_a/img/brand03_bg_2.png);
	background-size: auto, cover;
	background-repeat: repeat, repeat-y;
	color: #D9D5B8;
	padding: 200px 0 0;
}

.brand04-wrap {
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand04_bg.png);
	color: #E0BB9B;
	padding: 150px 0 130px;
}

.main-visual::before,
.brand01-wrap::before,
.brand02-wrap::before,
.brand03-wrap::before,
.brand03-wrap::after,
.brand04-wrap::before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	background-size: cover;
	background-repeat: no-repeat;
}

.main-visual::before {
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand01_bg_top.png);
	aspect-ratio: 1366 / 100;
	z-index: 1;
}

.brand01-wrap::before {
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand02_bg_top.png);
	aspect-ratio: 1366 / 180;
}

.brand03-wrap::before {
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand03_bg_top.png);
	aspect-ratio: 1366 / 180;
	top: 0;
	bottom: auto;
}

.brand03-wrap::after {
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand04_bg_top.png);
	aspect-ratio: 1366 / 180;
}

.brand04-wrap::before {
	background-image: url(/cms/contents/lp/sunglasses_a/img/service_bg_top.png);
	aspect-ratio: 1366 / 100;
}

.brand01,
.brand02,
.brand03,
.brand04,
#service {
	position: relative;
}

.brand01::before,
.brand01::after,
.brand02::before,
.brand02::after,
.brand03::before,
.brand03::after,
.brand04::before,
.brand04::after,
#service::before {
	position: absolute;
	content: "";
	height: auto;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

.brand01::before {
	top: 7%;
	left: 55%;
	width: 45%;
	max-width: 717px;
	aspect-ratio: 717 / 272;
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand01_glasses.png);
}

.brand01::after {
	bottom: -30%;
	left: 52%;
	width: 48%;
	max-width: 580px;
	aspect-ratio: 580 / 498;
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand01_season.png);
}

.brand02::before {
	top: 10%;
	right: 53%;
	width: 43%;
	max-width: 669px;
	aspect-ratio: 669 / 238;
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand02_glasses.png);
}

.brand02::after {
	bottom: -35%;
	right: 57%;
	width: 41%;
	max-width: 546px;
	aspect-ratio: 546 / 472;
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand02_season.png);
}

.brand03::before {
	top: 7%;
	left: 53%;
	width: 43%;
	max-width: 672px;
	aspect-ratio: 672 / 270;
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand03_glasses.png);
}

.brand03::after {
	bottom: -30%;
	left: 52%;
	width: 47%;
	max-width: 658px;
	aspect-ratio: 658 / 417;
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand03_season.png);
}

.brand04::before {
	top: 6%;
	right: 51%;
	width: 46%;
	max-width: 696px;
	aspect-ratio: 696 / 267;
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand04_glasses.png);
}

.brand04::after {
	bottom: -3%;
	right: 52%;
	width: 44%;
	max-width: 599px;
	aspect-ratio: 599 / 452;
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand04_season_1.png);
}

#service::before {
	top: -40%;
	left: 76%;
	width: 23%;
	max-width: 232px;
	aspect-ratio: 232 / 221;
	background-image: url(/cms/contents/lp/sunglasses_a/img/brand04_season_2.png);
}

.brand02 .brand-detail .container:first-of-type,
.brand04 .brand-detail .container:first-of-type {
	flex-direction: row-reverse;
}

.brand02 .brand-detail .container:last-of-type,
.brand04 .brand-detail .container:last-of-type {
	justify-content: end;
}

.brand02 .brand-detail .d-flex:last-of-type,
.brand04 .brand-detail .d-flex:last-of-type {
	flex-direction: row-reverse;
}

.brand04 .btn-wrap {
	margin-top: 160px;
}

#service {
	background-color: #5C2E20;
	padding-block: 85px 50px;
}

.service-heading {
	text-align: center;
}

#service h3 {
	font-size: var(--fz36);
	margin-bottom: 10px;
}

#service h3+p {
	font-size: var(--fz18);
}

#service .d-flex {
	gap: 54px;
	margin-top: 50px;
}

.link-column img {
	display: block;
	width: 100%;
	margin-bottom: 15px;
}

.link-column h4 {
	font-weight: 700;
	font-size: var(--fz12);
}

.link-column h4 span {
	display: block;
	font-size: 25px;
}

.link-column p {
	font-size: var(--fz14);
	line-height: 2;
	margin-top: 10px;
}

.other {
	background-color: #EAE1D9;
	padding-block: 40px;
}

.other .d-flex {
	align-items: center;
	gap: 54px;
}

.other .d-flex>div {
	flex: 1;
}

.other h3 {
	font-size: var(--fz22);
}

.other p {
	font-size: var(--fz14);
	line-height: 2;
	margin-top: 20px;
}

/*===============================
MARK: footer
=================================*/
.site-footer {
	background: #5C2E20;
	padding-block: 62px 70px;
}

.btn-wrap {
	text-align: center;
}

.footer-inner {
	justify-content: center;
	gap: 50px;
}

.copyright {
	margin-top: 45px;
	font-weight: 400;
	font-size: var(--fz14);
	text-align: center;
}