html {
    margin: 0 !important;
}


:root {
    /* ベースのフォントサイズ */
    --header-back-color: #323232;
    --header-height: 60px;
	--fg:#fff;
	--muted:#9aa4b2;
	--accent:#1ea7fd;
	--font-base-color: #000;
	--gap: 12px;
	--bg:#0f1216; --fg:#fff; --muted:#9aa4b2;
}

/* ベース設定 */
body {
  margin: 0;
  background: #fff;
}
a {
	text-decoration: none;
	display: inline;
}

.pc-only {
    display: block;
}
.sp-only {
    display: none;
}


/* テキスト */
.oswald-regular {
  font-family: "Julius Sans One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.oswald-bold {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;

}

.text-red {
	color: #FF0000;
}
/* テキスト */

img {
	max-width: 100%;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height: var(--header-height);
    z-index: 10;
    background: var(--header-back-color);
}

main {
	/* margin-top: var(--header-height); */
}

section {
	width: 100%;
	padding: 3em 0;
}

footer {
	background: var(--header-back-color);
	color: #fff;
	padding: 0.5em;
}

.header-nav {
    display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 2em;
	height: 100%;
}

.header-logo {
	width: 180px;
}


/* ハンバーガーボタン */
.hamburger{
	--size:28px;
	inline-size:44px; block-size:44px; display:grid; place-items:center;
	border:0; background:transparent; color:var(--fg); border-radius:10px; cursor:pointer;
}

.hamburger:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.hamburger .lines{position:relative; inline-size:var(--size); block-size:var(--size);}
.hamburger .line{
    position:absolute; left:0; right:0; height:2px; background:currentColor;
    border-radius:2px; transition:transform .25s ease, opacity .2s ease, top .25s ease;
}

.hamburger .line:nth-child(1){top:4px}
.hamburger .line:nth-child(2){top:14px}
.hamburger .line:nth-child(3){top:24px}
/* 開いた時のXアイコン */
.hamburger[aria-expanded="true"] .line:nth-child(1){top:11px; transform:rotate(45deg)}
.hamburger[aria-expanded="true"] .line:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] .line:nth-child(3){top:11px; transform:rotate(-45deg)}

  /* ナビ */
.nav{
    position:fixed; 
	top: var(--header-height);
	right: 0;
	bottom: 0;
	width: min(78vw, 360px);
    transform:translateX(100%);
	transition:transform .28s ease;
    background: #fff;
	backdrop-filter:saturate(120%) blur(6px);
    border-bottom:1px solid rgba(255,255,255,.08);
	z-index: 1000;
	display: flex;
    flex-flow: column;
    justify-content: space-between;
	overflow-y: auto;
}
.nav.open{
	transform:translateX(0)
}
.nav > ul{
	list-style:none;
	margin:64px 16px 24px;
	padding:0;
	display:grid;
	gap:8px;
}
.nav a{
    display:block;
	padding:14px 12px;
	border-radius:12px;
	color:var(--font-base-color);
    background:rgba(255,255,255,.04);
	text-decoration: none;
}
.nav a:hover{background:rgba(255,255,255,.08)}


.top-img {
	/* background-image: url('../img/top_img_2.jpg');
	background-repeat: no-repeat;
    background-size: cover;
	background-position: 0 30%; */
    vertical-align: middle;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.top-img:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('../img/top_img_2.jpg');
	background-repeat: no-repeat;
	background-size: cover;      /* cover を下限にする */
	background-position: 0 30%;
	transform-origin: center;
	z-index: -1;
}
.top-text {
	position: absolute;
	bottom: 30%;
    left: 8%;
	font-size: 2.2em;
	/* color: #fff; */
	font-weight: 600;
	letter-spacing: 2px;
}

.nav .nav-list {
	border-bottom: 1px solid #000;
}

.nav .nav-fragrance {
	padding: 14px 12px;
	position: relative;
	cursor: pointer;
}
.nav .nav-fragrance:after {
	content: "";
	background-image: url('../img/add.svg');
	width: 1em;
	height: 1em;
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
    vertical-align: middle;
	position: absolute;
	top: 50%;
	right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
	transition: transform 0.3s;
}

.nav .nav-fragrance.open:after {
	transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
}


.nav .fragrance-list {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s;
}

.nav .fragrance-list.open {
	max-height: 300px;
}

.nav .fragrance-list li {
	position: relative;
}

.nav .fragrance-list li::marker {
  content: "-";
}

.nav .fragrance-list li::after {
	content: "";
	background-image: url('../img/arrow_b.svg');
	width: 1em;
	height: 1em;
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
    vertical-align: middle;
	position: absolute;
	top: 50%;
	right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.nav .fragrance-list li {
	margin: 1em 0;
	letter-spacing: 5px;
	/* font-family: "Julius Sans One", sans-serif; */
    font-weight: bold;
    /* font-style: normal; */

}

.nav .nav-topic {
	position: relative;
}
.nav .nav-topic:after {
	content: "";
	background-image: url('../img/arrow_b.svg');
	width: 1em;
	height: 1em;
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
    vertical-align: middle;
	position: absolute;
	top: 50%;
	right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}


/* スライダー */
.slider {
	position: relative;
    max-width: 920px;
    margin: 32px auto;
    padding: 0 12px;
  }

  .slider-head {
    display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px;
  }
  .slider-title { font-weight:700; letter-spacing:.2px; }
  .slider-status { color:var(--muted); font-size: 13px; }

  .slider-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
	/* padding: 0 var(--gap); */
  }

  .slider-track {
    display:flex;
    gap: var(--gap);
    will-change: transform;
    transform: translateX(0);
    transition: transform .35s ease;
  }

  /* 3枚レイアウト：3つのカード幅合計＋ギャップ2つでViewport幅に収まる */
  .slide {
    flex: 0 0 calc( (100% - (var(--gap) * 2)) / 3 );
    aspect-ratio: 15/17;
    display:grid;
	place-items:center;
    position: relative;
    overflow: hidden;
	cursor: pointer;
  }
  .thumb {
    position:absolute; inset:0;
    background-image: radial-gradient(60% 60% at 50% 30%, rgba(255,255,255,.12), transparent 60%);
  }
  .label {
    position: relative;
    z-index: 1;
    font-size: 24px; font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
  }

  /* 矢印ボタン */
  .slider-nav {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
	width: 100%;
    /* margin-top: 10px; */
    display:flex;
	/* gap:8px; */
	justify-content: space-between;
	pointer-events: none;
  }
  .arrow {
    inline-size: 44px;
	block-size: 44px;
    display:grid;
	place-items:center;
    border:1px solid #4C4C4C;
    border-radius: 22px; 
	background: #fff;
    color:#4C4C4C;
	cursor:pointer;
	pointer-events: auto;
  }
  .arrow:hover { background: rgba(255,255,255,.08); }
  .arrow:disabled { opacity:.4; cursor: not-allowed; }

  /* アイコン（SVG） */
  .arrow svg { width:20px; height:20px; }
/* スライダー */


/* セクション */
.section-title {
	text-align: center;
	font-size: 3em;
	text-decoration: underline;
	text-underline-offset: 0.03em;
}

.section-body {
	max-width: 1260px;
	margin: 4em auto;
}

.section-topics {
	background:#F2F2F2;
}

.topics-body {
	/* margin: 2em 5em; */
	min-width: 60%;
	max-width: 748px;
}

.topics-body li {
    letter-spacing: 2px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.fragrance-btn-outer {
	margin: 1em auto;
	width: 100%;
    max-width: 748px;
}

.fragrance-btn {
	background: #000;
	color: #fff;
	padding: 1em 0;
	padding-bottom: 0.5em;
	text-align: center;
}
.fragrance-btn div {
	position: relative;
	margin: 0 1em;
	font-size: 3em;
}
.fragrance-btn div:after {
	content: "";
	position: absolute;
	bottom: 0;
    right: 0;
	width: 40px;
	height: 40px;
	background-image: url('../img/arrow.svg');
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
    vertical-align: middle;
	/* transition: right 0.5s; */
	transition: transform 0.5s;
}

.fragrance-btn span {
	font-size: 0.8em;
}

.shop-info {
	text-align: center;
	margin: 4em auto;
}

.shop-info-btn-outer {
	margin: 4em auto;
	width: 400px;
	max-width: 80%;
}

.shop-info-btn {
	border: 1px solid #000;
	padding: 1em 0;
	text-align: center;
	color: #000;
	position: relative;
	margin: 0 1em;
}

.shop-info-btn:after {
	content: "";
	position: absolute;
	bottom: 15px;
    right: 15px;
	width: 30px;
	height: 30px;
	background-image: url('../img/arrow_b.svg');
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
    vertical-align: middle;
	/* transition: right 0.5s; */
	transition: transform 0.5s;
}

.nav .shop-info-btn-outer {
	margin-bottom: 2em;
	max-width: 100%;
}
.nav .shop-info-btn:after {
	bottom: 20px;
    right: 10px;
	width: 20px;
	height: 20px;
}


.section-category {
	border-bottom: 2px solid #000;
}
/* セクション */

/* Products */

.products-top {
	margin-top: calc(var(--header-height) + 1em);
	text-align: center;
}
.products-top div {
	font-size: 3em;
}
.products-top p {
	margin-top: 0;
}

.products-hr {
	width: 60%;
	min-width: 278px;
}

.products-btn-outer {
	margin: 1em auto;
	width: 50%;
	max-width: 428px;
}

.products-btn {
	background: #000;
	color: #fff;
	position: relative;
	padding: 1em 0;
	text-align: center;
	letter-spacing: 5px;
	border-radius: 20px;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

}

.products-btn .new-icon {
	position: absolute;
	top: -60%;
	left: 5%;
	width: 100px;
}

.products-btn div {
	position: relative;
	margin: 0 1em;
	font-size: 2em;
}
.products-btn div:after {
	content: "";
	position: absolute;
	bottom: 0;
    right: 0;
	width: 40px;
	height: 40px;
	background-image: url('../img/arrow.svg');
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
    vertical-align: middle;
	/* transition: right 0.5s; */
	transition: transform 0.5s;
}

.products-img {
	margin: 4em auto;
	padding: 0 1em
}


.products-info-title {
	font-family: "Julius Sans One", sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 1.5em;
	text-align: center;
}

.products-info-section hr {
	margin: 1em auto;
	width: 80%;
	max-width: 800px;
}
.products-info-list {
	margin: 0 auto;
	max-width: 760px;
}
.products-info-list ul {
	margin: 0 1em;
}

.products-brand-section {
	position: relative;
	background-image: url('../img/bg_ft.jpg');
	background-repeat: no-repeat;
    background-size: cover;
	background-position: bottom;
    vertical-align: middle;
}
.products-brand {
	margin: 3em auto;
	text-align: center;
	color: #fff;
}
.products-brand-title {
	max-width: 428px;
}
.products-brand p {
	margin: 0.5em 0;
}
.products-brand div {
	margin: 2em auto;
}
.products-brand .text-l {
	font-size: 1.5em;
}
.products-brand img {
	width: 320px;
}

.product-num-title {
	padding: 0.5em;
    margin: 1em auto;
    width: 320px;
    max-width: 50%;
    background: #000;
    color: #fff;
    border-radius: 24px;
    text-align: center;
    font-size: 2em;
	letter-spacing: 5px;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.product-main-section {
	background: #F2F2F2;
}
.product-main {
	display: grid;
    gap: 2em;
    padding: 2em;
	margin: 0 auto;
	max-width: 920px;
}

/* Products */


.copyright {
	margin: 0;
	text-align: center;
	font-size: 0.8em;
}

.arrow-btn.active div:after {
	/* right: -20px; */
	transform: translateX(20px);
}


/* アニメーション */
.scroll-popup {
	transform: translateY(40px) scale(0.8);
    opacity: 0;
}
.scroll-popup.animation  {
	animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes popup {
	0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scale(1.0);
	}
	80%, 100% {
		opacity: 1;
	}
}

.scroll-fadein {
	opacity: 0;
	transform: translateY(30%);
}
.scroll-fadein.animation {
	animation: fadeup 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeup {
  0% {
    transform: translateY(30%);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* アニメーション */


@media (max-width: 767px) {
	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}

	/* .top-img {
		background-position: right 35% top 5%;
	} */
	.top-img:before {
		background-position: left 35% top 5%;
		transform: scale(1.3);
		transform-origin: left;
	}

	.top-text {
		top: 30%;
		left: 5%;
		font-size: 1.5em;
	}

	.nav {
		width: 100vw;
	}

	.products-brand-section {
		position: relative;
		background-image: url('../img/bg_ft_sp.jpg');
		min-height: 448px;
	}

	.products-brand {
		margin-top: 0;
		margin-left: 1em;
		margin-right: 1em;
		font-size: 0.8em;
	}
	.products-brand div {
		margin: 1em auto;
	}
	.products-brand-title {
		padding: 0 3em;
	}
	.products-brand .text-l {
		font-size: 1.2em;
		font-weight: bold;
	}
	.products-brand img {
		width: 60%;
		max-width: 320px;
	}

	.shop-info-btn-outer {
		max-width: 90%;
	}
	.shop-info-btn:after {
		bottom: 20px;
		right: 15px;
		width: 20px;
		height: 20px;
	}
}

@media (max-width: 420px) {
	section {
		padding: 2em 0;
	}

	.oswald-bold.oswald-sp-tiny {
		font-weight: 400;
	}

    .label { font-size: 20px; }

	.header-nav {
		margin: 0 1em;
	}

	.header-logo {
		width: 120px;
	}

	.fragrance-btn-outer {
		margin: 3em auto;
	}

	.fragrance-btn {
		padding-top: 0.5em;
		padding-bottom: 0.2em;
	}

	.fragrance-btn div {
		font-size: 2em;
	}

	.section-body {
		margin: 0 auto;
	}

	.topics-body {
		margin: 0 1em;
		font-size: 0.8em;
	}

	.products-info-title {
		font-size: 1.2em;
	}

	.products-img {
		margin: 2em auto;
	}

	.products-btn-outer {
		width: 60%;
	}

	.products-btn .new-icon {
		position: absolute;
		top: -55%;
		left: -15%;
		width: 75px;
	}

	.products-btn div {
		margin: 0 0.5em;
		font-size: 1.8em;
	}

	.products-btn div:after {
		bottom: 5px;
		width: 30px;
    	height: 30px;
	}

	.products-info-list {
		font-size: 0.8em;
		margin: 2em 1.5em;
	}
	.products-info-list ul {
		padding-left: 2em;
	}

	/* スライダー */
	.slide {
		flex: 0 0 100%;
	}
	/* スライダー */
}