/* ==========================================================================
   CSS Variables & Reset
   ========================================================================== */
:root {
	--color-bg:            #fff;
	--color-text:          #111;
	--color-muted:         #888;
	--color-border:        #e0e0e0;
	--color-dark:          #111;
	--color-accent:        #333;
	--header-height:       72px;
	--max-width:           1280px;
	--gutter:              50px;
	--font-mincho:         'Zen Old Mincho', serif;
	--font-mincho-weight:  500;
	--font-number:'Manrope', sans-serif;
}

html {
	scroll-behavior: smooth;
	height:          100%;
}

* {
	margin:     0;
	padding:    0;
	box-sizing: border-box;
}

body {
	font-family:             "Zen Kaku Gothic New", sans-serif;
	font-weight:             400;
	line-height:             1.8;
	color:                   var(--color-text);
	background-color:        var(--color-bg);
	-webkit-font-smoothing:  antialiased;
	display:                 flex;
	flex-direction:          column;
	min-height:              100vh;
}

main {
	flex: 1;
}

img {
	display:   block;
	max-width: 100%;
}

a {
	color:           inherit;
	text-decoration: none;
}

ul {
	list-style: none;
}

.font-zen-mincho {
	font-family: var(--font-mincho);
	font-weight: var(--font-mincho-weight);
}

/* SP改行 / PC改行 ユーティリティ */
.br-sp {
	display: none;
}


/* ==========================================================================
   Fade Animation
   ========================================================================== */
.js-fade {
	--fade-dur:  1.5s;
	--fade-blur: 3px;
	opacity:    0;
	transform:  translateY(20px);
	filter:     blur(var(--fade-blur));
	transition:
		opacity   var(--fade-dur) cubic-bezier(0.22, 1, 0.36, 1),
		filter    var(--fade-dur) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--fade-dur) cubic-bezier(0.22, 1, 0.36, 1);
}

.js-fade.fade {
	opacity:   1;
	transform: translateY(0);
	filter:    blur(0px);
}

.js-fade-delay-1 { transition-delay: 0.15s; }
.js-fade-delay-2 { transition-delay: 0.30s; }
.js-fade-delay-3 { transition-delay: 0.45s; }
.js-fade-delay-4 { transition-delay: 0.60s; }


/* ==========================================================================
   Header — PC
   ========================================================================== */
.header {
	position:      fixed;
	top:           0;
	left:          0;
	z-index:       100;
	display:       flex;
	justify-content: space-between;
	align-items:   center;
	width:         100%;
	height:        var(--header-height);
	padding:       0 var(--gutter);
	border-bottom: 1px solid transparent;
	background:    rgba(255, 255, 255, 1);
	transition:    border-color 0.3s ease;
}

.header.scrolled {
	border-bottom-color: var(--color-border);
}

.header__logo img {
	display: block;
	width:   150px;
	height:  auto;
}

.header__nav {
	margin-right: 0;
}

.header__nav-list {
	display:    flex;
	gap:        30px;
	list-style: none;
}

.header__nav-list a {
	position:       relative;
	padding-bottom: 4px;
	font-size:      16px;
	font-weight:    800;
	letter-spacing: 0.12em;
	color:          var(--color-text);
}

.header__nav-list a::after {
	content:    '';
	position:   absolute;
	bottom:     0;
	left:       0;
	width:      0;
	height:     1px;
	background: var(--color-text);
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.header__nav-list a:hover::after {
	width: 100%;
}

/* ドロワー・ハンバーガー（SP用・PC非表示） */
.nav-toggle { display: none; }
.drawer     { display: none; }


/* ==========================================================================
   Hero Section — Fullscreen Slider
   ========================================================================== */
.hero {
	position: relative;
}

.hero__image-wrapper {
	position:   relative;
	overflow:   hidden;
	height:     100vh;
	max-height: 1080px;
	background: #e8e8e8;
}

.hero-slide {
	position:            absolute;
	top:                 70px;
	left:                0;
	width:               110%;
	height:              100%;
	opacity:             0;
	background-size:     cover;
	background-position: center;
	transition:          opacity 0.8s ease;
}

.hero-slide.active {
	opacity:   1;
	animation: heroSlideMove 8s linear forwards;
}

@keyframes heroSlideMove {
	0%   { transform: translateX(0);    filter: blur(0);     opacity: 0.2; }
	5%   {                                                    opacity: 1;   }
	70%  {                               filter: blur(0);                   }
	99%  {                               filter: blur(5rem);                }
	100% { transform: translateX(-6%);  filter: blur(5rem);  opacity: 0.8; }
}

/* Hero content — 左下配置 */
.hero__content {
	position:       absolute;
	bottom:         60px;
	left:           var(--gutter);
	z-index:        10;
	display:        flex;
	align-items:    flex-end;
	gap:            32px;
	pointer-events: none;
	color:          #fff;
}

.hero__content-text {
	text-align: left;
}

.hero__title {
	margin-bottom:  6px;
	font-size:      16px;
	font-weight:    500;
	letter-spacing: 0.15em;
}

.hero__model {
	font-size:      12px;
	font-weight:    500;
	letter-spacing: 0.16em;
	color:          #fff;
	font-family:    var(--font-number);
}

/* Hero scroll indicator */
.hero__scroll {
	position:       absolute;
	bottom:         60px;
	right:          var(--gutter);
	z-index:        10;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            12px;
	font-size:      10px;
	letter-spacing: 0.2em;
	color:          rgba(255, 255, 255, 1);
	font-weight: 600;
}

.hero__scroll-line {
	position:   relative;
	overflow:   hidden;
	width:      1.4px;
	height:     48px;
	background: rgba(255, 255, 255, 0.4);
}

.hero__scroll-line::after {
	content:    '';
	position:   absolute;
	top:        -100%;
	left:       0;
	width:      100%;
	height:     100%;
	background: rgba(255, 255, 255, 0.9);
	animation:  scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine {
	0%   { top: -100%; }
	100% { top:  100%; }
}

/* Veil */
.hero-veil {
	position:   absolute;
	top:        0;
	right:      -100%;
	z-index:    20;
	width:      100%;
	height:     100%;
	background: #f5f5f5;
}

.hero-veil.active {
	animation: heroVeilAnim 2s ease forwards;
}

@keyframes heroVeilAnim {
	0%   { right: -100%; opacity: 0.30; }
	40%  { right:    0;  opacity: 0.80; }
	60%  { right:    0;  opacity: 0.98; }
	100% { right:  100%; opacity: 1;    }
}


/* ==========================================================================
   Section Common
   ========================================================================== */
.section-title__en {
	display:        block;
	margin-bottom:  8px;
	font-size:      10px;
	letter-spacing: 0.25em;
	color:          var(--color-muted);
}

.section-title__main {
	font-size:      28px;
	letter-spacing: 0.12em;
}


/* ==========================================================================
   Product Section — PC: 3-card full-width slider
   ========================================================================== */
.product {
	width:   100%;
	padding: 120px 0 80px;
}

.product__header {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-end;
	max-width:       var(--max-width);
	margin:          0 auto 40px;
	padding:         0 var(--gutter);
}

.product__link-all {
	padding-bottom: 4px;
	font-size:      11px;
	letter-spacing: 0.18em;
	color:          var(--color-muted);
	border-bottom:  1px solid var(--color-border);
	transition:     color 0.3s, border-color 0.3s;
}

.product__link-all:hover {
	color:        var(--color-text);
	border-color: var(--color-text);
}

/* スライダーコンテナ */
.product__slider-wrapper {
	position:  relative;
	overflow:  hidden;
	width:     100%;
	max-width: var(--max-width);
	margin:    0 auto;
	padding: 0 var(--gutter);
}

.product__slider-container {
	overflow:       hidden;
	width:          100%;
	scrollbar-width: none;
}

.product__slider-container::-webkit-scrollbar {
	display: none;
}

.product__slider-inner {
	display:    flex;
	gap:        24px;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.product__card {
	flex:          0 0 calc((100% - 24px) / 2);
	padding:       0 0 24px;
	border-bottom: 1px solid var(--color-border);
	cursor:        pointer;
}

.product__img {
	display:      block;
	width:        100%;
	aspect-ratio: 4 / 3;
	object-fit:   cover;
	background:   #f2f2f2;
}

.product__info {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	margin-top:      18px;
	padding:         0 2%;
}

.product__name {
	font-size:      15px;
	font-weight:    700;
	letter-spacing: 0.08em;
}

.product__sub {
	margin-top:     6px;
	font-size:      11px;
	letter-spacing: 0.08em;
	color:          var(--color-muted);
	font-family: var(--font-number);
}

.product__arrow-link {
	display:      inline-block;
	flex-shrink:  0;
	margin-top:   4px;
	font-size:    12px;
	color:        var(--color-muted);
	transition:   color 0.3s, transform 0.3s;
}

.product__card:hover .product__arrow-link {
	color:     var(--color-text);
	transform: translateX(4px);
}

/* ページネーション */
.product__pagination {
	display:         flex;
	justify-content: center;
	gap:             8px;
	margin-top:      32px;
}

.product__dot {
	display:          inline-block;
	width:            32px;
	height:           4px;
	background-color: #ddd;
	cursor:           pointer;
	transition:       background-color 0.3s;
}

.product__dot--active {
	background-color: #333;
}

/* PC: 2枚同時表示のためページネーション不要 */
@media (min-width: 769px) {
	.product__pagination {
		display: none;
	}
}


/* ==========================================================================
   Concept Section — PC: 左右2カラム
   ========================================================================== */
.concept {
	width:       100%;
	margin-top:  80px;
	background:  linear-gradient(to bottom, #fff, #f6f6f6);
}

.concept__inner {
	width:   100%;
	padding: 0 0 120px;
}

.concept__header {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-end;
	max-width:       var(--max-width);
	margin:          0 auto;
	padding:         0 var(--gutter) 60px;
}

.concept__message {
	width:               100%;
	padding:             140px 0;
	background-image:    url("../img/bg_concept.png");
	background-size:     cover;
	background-position: center;
	background-repeat:   no-repeat;
}

.concept__message-inner {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	align-items:           center;
	gap:                   80px;
	max-width:             var(--max-width);
	margin:                0 auto;
	padding: 0 var(--gutter);
}

.concept__lead {
    font-size: 35px;
    line-height: 1.2;
    letter-spacing: 0.2em;
}

.concept__message-right {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            16px;
}

.concept__text-jp {
	font-size:      20px;
	letter-spacing: 0.15em;
}

.concept__description {
	font-size:   16px;
	line-height: 2;
	color:       #555;
	letter-spacing: 0.05em;
}

.concept__link-detail {
	margin-top:     8px;
	padding-bottom: 4px;
	font-size:      11px;
	letter-spacing: 0.2em;
	border-bottom:  1px solid var(--color-text);
	transition:     opacity 0.3s;
}

.concept__link-detail:hover {
	opacity: 0.5;
}


/* ==========================================================================
   Footer — PC
   ========================================================================== */
.footer {
	padding:     0 0 60px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	color:       #fff;
	background:  var(--color-dark);
}

.footer__top-button {
	display:         flex;
	justify-content: flex-end;
	padding-right:   var(--gutter);
}

.footer__arrow-up {
	position:        relative;
	top:             -90px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           60px;
	height:          60px;
	background:      var(--color-dark);
	transition:      background 0.3s;
}

.footer__arrow-up:hover {
	background: #1a1a1a;
}

.footer__arrow-up::after {
	content:    '';
	width:      10px;
	height:     10px;
	margin-top: 4px;
	border-top:   1px solid #fff;
	border-right: 1px solid #fff;
	transform:  rotate(-45deg);
}

.footer__inner {
	max-width: var(--max-width);
	margin:    0 auto;
	padding:   40px var(--gutter) 0;
}

.footer__top-row {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	padding-bottom:  60px;
	border-bottom:   1px solid #fff;
}

.footer__logo {
	width:         150px;
	margin-bottom: 12px;
	filter:        invert(100%);
}

.footer__tagline {
	font-size:      12px;
	letter-spacing: 0.12em;
	color:          #fff;
}

.footer__nav {
	display:     flex;
	align-items: flex-start;
	gap:         80px;
}

.footer__list {
	display: flex;
	gap:     25px;
}

.footer__item {
	font-size:      12px;
	letter-spacing: 0.18em;
}

.footer__item > a {
	display:       block;
	margin-bottom: 4px;
	transition:    opacity 0.3s;
}

.footer__item > a:hover {
	opacity: 0.5;
}

.footer__category-title {
	position:       relative;
	display:        block;
	padding-bottom: 16px;
	margin-bottom:  20px;
	font-size:      12px;
	letter-spacing: 0.18em;
}

.footer__category-title::after {
	content:    '';
	position:   absolute;
	bottom:     0;
	left:       0;
	width:      24px;
	height:     1px;
	background: #fff;
}

.footer__product-list {
	display:        flex;
	flex-direction: column;
	gap:            12px;
}

.footer__product-list li {
	display:   flex;
	gap:       5px;
	font-size: 11px;
	color:     #fff;
}

.product-id {
	display:     inline-block;
	flex-shrink: 0;
	width:       70px;
	color:       #fff;
	font-family: var(--font-number);
}

.footer__bottom {
	display:         flex;
	justify-content: center;
	align-items:     center;
	margin-top:      48px;
}

.footer__copyright {
	font-size:      10px;
	letter-spacing: 0.18em;
	text-align:     center;
	color:          #fff;
	font-family: var(--font-number);
}

/* CSS 矢印 */
.product__link-all::after,
.product__arrow-link::after,
.concept__link-detail::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  vertical-align: middle;
 margin-top: -2px;
}


/* ==========================================================================
   Page Hero — 下層ページ共通
   ========================================================================== */
.page-hero {
	padding-top:    calc(var(--header-height) + 100px);
	padding-bottom: 100px;
	text-align:     center;
}

.page-hero .section-title__en {
	display:        block;
	margin-bottom:  12px;
	font-size:      10px;
	letter-spacing: 0.25em;
	color:          var(--color-muted);
}

.page-hero .section-title__main {
	font-family:    var(--font-mincho);
	font-size:      40px;
	font-weight:    500;
	line-height:    1;
	letter-spacing: 0.12em;
}


/* ==========================================================================
   Product List Section
   ========================================================================== */
.product-list {
	max-width: var(--max-width);
	margin:    0 auto;
	padding:   0 var(--gutter) 120px;
}

.product-category {
	margin-bottom: 80px;
}

.product-category__header {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	margin-bottom:   40px;
	padding-bottom:  16px;
	border-bottom:   1px solid var(--color-muted);
}

.product-category__title-en {
	font-size:      18px;
	font-weight:    700;
	letter-spacing: 0.18em;
}

.product-category__title-jp {
	font-size:      14px;
	letter-spacing: 0.12em;
	color:          var(--color-muted);
}

.product-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   48px 32px;
}

.product-item {
	cursor: pointer;
}

.product-item__image-wrap {
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	aspect-ratio:    4 / 3;
	margin-bottom:   20px;
}

.product-item__image-wrap img {
	display:     block;
	width:       95%;
	height:      95%;
	object-fit:  contain;
	transition:  transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-item:hover .product-item__image-wrap img {
	transform: scale(1.04);
}

.product-item__name {
	font-size:      16px;
	line-height:    1.6;
	letter-spacing: 0;
	text-align: center;
}

.product-item__spec {
	margin-bottom:  12px;
	min-height:     1.4em;
	font-size:      11px;
	letter-spacing: 0.06em;
	color:          var(--color-muted);
	text-align: center;
	font-family: var(--font-number);
}

.product-item__id {
	display:        block;
	width: fit-content;
	margin: auto;
	padding:        4px 10px;
	font-size:      10px;
	letter-spacing: 0.12em;
	color:          var(--color-text);
	border:         1px solid var(--color-border);
	transition:     border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	font-family: var(--font-number);
}

.product-item:hover .product-item__id {
	border-color: var(--color-text);
}


/* ==========================================================================
   Company Info
   ========================================================================== */
.company-info {
	max-width: var(--max-width);
	margin:    0 auto;
	padding:   0 var(--gutter) 160px;
}

.company-table {
	width: 100%;
}

.company-table__row {
	display:       flex;
	align-items:   baseline;
	gap:           48px;
	padding:       28px 0;
	border-bottom: 1px solid var(--color-border);
}

.company-table__row:first-child {
	border-top: 1px solid var(--color-border);
}

.company-table__term {
	flex-shrink:    0;
	width:          96px;
	font-size:      13px;
	font-weight:    700;
	line-height:    1.8;
	letter-spacing: 0.1em;
}

.company-table__desc {
	font-size:      13px;
	line-height:    1.9;
	letter-spacing: 0.06em;
	color:          var(--color-text);
	font-family:var(--font-number) ;
}


/* ==========================================================================
   Concept Lead
   ========================================================================== */
.concept-lead {
	padding:          250px var(--gutter) 100px;
	text-align:       center;
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(246, 246, 246, 1));
}

.concept-lead__inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            32px;
	margin:         0 auto;
}

.concept-lead__brand {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            16px;
}

.concept-lead__logo {
	width: 300px;
    height: 300px;
    background-color: #eee;
    padding: 0 57px;
    border-radius: 3px;
	filter:           invert(1) blur(var(--fade-blur, 3px));
}

.concept-lead__brand-text {
	font-size:      18px;
	line-height:    2;
	letter-spacing: 0.08em;
	font-family:    var(--font-mincho);
}

.concept-lead__rule {
	width:      40px;
	height:     1px;
	background: var(--color-text);
}

.concept-lead__title {
	font-size:      45px;
	line-height:    1.7;
	letter-spacing: 0.2em;
	white-space:    nowrap;
}

.concept-lead__text-jp {
	font-size:      18px;
	line-height:    2;
	letter-spacing: 0.08em;
	font-family:    var(--font-mincho);
}


/* ==========================================================================
   Concept Blocks
   ========================================================================== */
.concept-blocks {
	padding:        30px 0 160px;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
}

/* テキストブロック */
.concept-text-block {
	margin-bottom: 72px;
}

/* ブランド名 */
.concept-brand {
	font-size:      18px;
	letter-spacing: 0.4em;
	margin-bottom:  60px;
	color:          var(--color-text);
}

/* 画像2枚横並び */
.concept-images-row {
	display: block;
    width: 100%;
    max-width: 820px;
    padding: 0;
    margin: 50px 0 0 0;
    border-radius: 10px;
    overflow: hidden;
}

.concept-images-row__item {
	position: relative;
}

.concept-images-row__item img {
	display: block;
	width:   100%;
	height:  auto;
}

/* ロゴオーバーレイ */
.concept-images-row__item .concept-logo-overlay {
	position:         absolute;
	top:              72px;
	left:             50%;
	transform:        translateX(-50%);
	width:            52%;
	height:           auto !important;
	opacity:          0;
	transition:       opacity 4s ease;
	transition-delay: 1s;
	pointer-events:   none;
	width: 25%;
}

/* 親が fade クラスを得たらジワッと表示 */
.concept-images-row__item.fade .concept-logo-overlay {
	opacity: 0.82;
}

/* concept-lead / concept-blocks: blur 20%アップ・fade 1s長く */
.concept-lead .js-fade,
.concept-blocks .js-fade {
	--fade-dur:  2s;
	--fade-blur: 10px;
}

/* ロゴ: fade後もinvert(1)を維持（js-fade.fadeのfilterリセットを上書き） */
.concept-lead .concept-lead__logo.fade {
	filter: invert(1);
}

/* オーバーレイ画像ラッパー（グリッドアイテムとして機能） */
.concept-block__image-wrap {
	position: relative;
	overflow: visible;
}

/* justify-self / order をラッパーに移譲 */
.concept-block--img-left  .concept-block__image-wrap { justify-self: start; }
.concept-block--img-right .concept-block__image-wrap { order: 2; justify-self: end; }

/* オーバーレイ共通 */
.concept-block__overlay {
	position:       absolute;
	width:          55%;
	pointer-events: none;
	box-shadow:     6px 12px 36px rgba(0, 0, 0, 0.20);
	z-index:        4;
}

/* Block1（画像左）: 右下からはみ出し */
.concept-block__overlay--1 {
    top: -22%;
    left: -14%;
}

/* Block2（画像右）: 左下からはみ出し */
.concept-block__overlay--2 {
	bottom: -12%;
	left:   -10%;
}

.concept-block {
	display:               grid;
	grid-template-columns: 50% 1fr;
	align-items:           center;
	width:                 100%;
	max-width:             1380px;
	margin:                0 auto 90px;
}

.concept-block--img-right {
	grid-template-columns: 1fr 50%;
}

/* justify-self / order は .concept-block__image-wrap 側で管理 */

.concept-block--img-right .concept-block__body {
	order: 1;
}

.concept-block__image {
	position: relative;
	overflow: hidden;
	width:    90%;
    border-radius: 0;
}

.concept-block__image img {
	display: block;
    width: 100%;
    height: 100%;
}

/*
.concept-block__image::before {
	content:        '';
	position:       absolute;
	inset:          -30%;
	width:          160%;
	height:         160%;
	background:
		radial-gradient(ellipse 90px 140px  at 20% 18%, rgba(255,252,210,1) 0%, transparent 50%),
		radial-gradient(ellipse 55px  80px  at 52% 38%, rgba(255,250,200,0.65) 0%, transparent 65%),
		radial-gradient(ellipse 70px 110px  at 78% 22%, rgba(255, 255, 255, 1) 0%, transparent 65%),
		radial-gradient(ellipse 40px  65px  at 38% 68%, rgba(255,255,225,0.60) 0%, transparent 50%),
		radial-gradient(ellipse 110px 260px at 88% 62%, rgba(59, 55, 8, 0.95) 0%, transparent 65%),
		radial-gradient(ellipse 48px  75px  at 62% 80%, rgba(255,250,210,0.62) 0%, transparent 00%);
	animation:      komorebi1 10s ease-in-out infinite alternate;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index:        1;
}


.concept-block__image::after {
	content:        '';
	position:       absolute;
	inset:          -30%;
	width:          160%;
	height:         160%;
	background:
		radial-gradient(ellipse 60px 100px  at 45% 12%, rgba(255, 255, 255, 1) 0%, transparent 65%),
		radial-gradient(ellipse 85px 230px  at 15% 55%, rgba(48, 47, 35, 0.45) 0%, transparent 65%),
		radial-gradient(ellipse 150px 480px  at 70% 48%, rgb(255, 255, 255) 0%, transparent 65%),
		radial-gradient(ellipse 75px 215px  at 92% 30%, rgba(57, 57, 57, 0.9) 0%, transparent 65%),
		radial-gradient(ellipse 42px  68px  at 28% 85%, rgba(255,255,225,0.36) 0%, transparent 10%);
	animation:      komorebi2 5s ease-in-out infinite alternate;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index:        1;
}

@keyframes komorebi1 {
	0%   { transform: translate(  0%,   0%) rotate(  0deg) scale(1.00); opacity: 0.75; }
	20%  { transform: translate( 2%,  3%) rotate( 1.5deg) scale(1.03); opacity: 0.95; }
	40%  { transform: translate(-3%,  1%) rotate(-2.0deg) scale(0.97); opacity: 0.85; }
	60%  { transform: translate( 4%, -2%) rotate( 2.5deg) scale(1.04); opacity: 1.00; }
	80%  { transform: translate(-1%,  4%) rotate(-1.0deg) scale(1.01); opacity: 0.90; }
	100% { transform: translate( 3%,  2%) rotate( 1.0deg) scale(1.02); opacity: 0.80; }
}

@keyframes komorebi2 {
	0%   { transform: translate(  0%,   0%) rotate(  0deg) scale(1.00); opacity: 0.65; }
	25%  { transform: translate(-3%,  2%) rotate(-1.5deg) scale(1.02); opacity: 0.90; }
	50%  { transform: translate( 2%, -3%) rotate( 2.0deg) scale(0.98); opacity: 0.80; }
	75%  { transform: translate(-2%,  4%) rotate(-2.5deg) scale(1.03); opacity: 0.95; }
	100% { transform: translate( 4%,  1%) rotate( 1.5deg) scale(1.01); opacity: 0.70; }
} */

.concept-block__body {
	padding: 0;
}

.concept-block__text {
	font-size:      25px;
	font-family: var(--font-mincho);
	line-height:    2;
	letter-spacing: 0.3em;
	padding: 0
	;
}

/* 一文字ずつフェードイン */
.concept-block__text .char {
	display:   inline-block;
	opacity:   0;
	transform: translateY(8px);
}

.concept-block__body.fade .concept-block__text .char,
.concept-text-block.fade .concept-block__text .char {
	animation: charFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes charFadeIn {
	from {
		opacity:   0;
		transform: translateY(8px);
	}
	to {
		opacity:   1;
		transform: translateY(0);
	}
}


/* ==========================================================================
   Product Detail — Hero
   ========================================================================== */
.pd-hero {
	margin-top: var(--header-height);
	width:      100%;
	overflow:   hidden;
}

.pd-hero__image-wrap {
	overflow:     hidden;
	width:        100%;
	aspect-ratio: 16 / 7;
}

.pd-hero__image-wrap img {
	display:          block;
	width:            100%;
	height:           100%;
	object-fit:       cover;
	object-position:  center calc(56% + calc(var(--header-height) / 2));
	animation: pd-hero-zoom 1.5s ease-out forwards;
}

@keyframes pd-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}


/* ==========================================================================
   Product Detail — Intro
   ========================================================================== */
.pd-intro {
	max-width: var(--max-width);
	margin:    0 auto;
	padding:   64px var(--gutter) 240px;
}

.pd-intro__inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            48px;
}

.pd-intro__product {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0;
	width:          100%;
}

.pd-intro__color {
	display:        block;
	margin-bottom:  16px;
	font-size:      10px;
	letter-spacing: 0.25em;
	text-align:     center;
	color:          var(--color-dark);
}

.pd-intro__thumb {
	display:       block;
	width:         240px;
	margin-bottom: 15px;
	object-fit:    contain;
	transition:    opacity 0.22s ease;
}

.pd-intro__name {
	margin-bottom:  14px;
	font-size:      26px;
	font-weight:    700;
	letter-spacing: 0.14em;
	text-align:     center;
}

.pd-intro__label {
	display:        inline-block;
	padding:        5px 16px;
	margin: 0 0 48px;
	font-size:      10px;
	letter-spacing: 0.14em;
	color:          var(--color-text);
	border:         1px solid var(--color-border);
	font-family: var(--font-number);
}

.pd-intro__desc {
	width: 100%;
}

.pd-intro__catch {
	margin-bottom:  24px;
	font-family:    var(--font-mincho);
	font-size:      34px;
	font-weight:    700;
	line-height:    1.7;
	letter-spacing: 0.06em;
}

.pd-intro__text {
	font-size:      16px;
	line-height:    2.2;
	letter-spacing: 0.04em;
	color:          #555;
}


/* ==========================================================================
   Product Detail — Feature
   ========================================================================== */
.pd-feature {
	width:          100%;
	padding-bottom: 80px;
}

.pd-feature__header {
	display:     flex;
	align-items: flex-end;
	gap:         9px;
	max-width:   var(--max-width);
	margin:      0 auto 68px;
	padding:     0 var(--gutter);
}

.pd-feature__header-line {
	flex-shrink: 0;
	align-self:  center;
	width:       48px;
	height:      1px;
	background:  var(--color-text);
}

.pd-feature__header-en {
	font-family:    var(--font-mincho);
	font-size:      28px;
	font-weight:    700;
	letter-spacing: 0.22em;
	line-height:    1;
}

.pd-feature__header-note {
	font-size:      14px;
	letter-spacing: 0.12em;
	color:          var(--color-muted);
	line-height:    1;
}

.pd-feature__block {
	display:     grid;
	align-items: center;
	width:       100%;
	max-width: 1500px;
	margin: auto;
}

.pd-feature__block--img-left {
	grid-template-columns: 45% 1fr;
  margin-bottom: 100px;
}

.pd-feature__block--img-right {
	grid-template-columns: 1fr 45%;
  margin-bottom: 100px;
}

.pd-feature__image {
	overflow: hidden;
}

.pd-feature__image img {
	display:      block;
	width:        100%;
	aspect-ratio: 4 / 3;
	object-fit:   cover;
}

.pd-feature__body {
	position: relative;
	padding:  0 40px;
}

.pd-feature__num {
	display:        inline-block;
	margin-bottom:  20px;
	padding-bottom: 20px;
	font-family:    var(--font-mincho);
	font-size:      40px;
	font-weight:    var(--font-mincho-weight);
	line-height:    1;
	letter-spacing: 0.04em;
	border-bottom:  1px solid #111;
}

.pd-feature__num--tr {
	display: block;
	text-align: right;
}

.pd-feature__num--tl {
	display: block;
	text-align: left;
}

.pd-feature__text {
	font-size:      16px;
	line-height:    2.2;
	letter-spacing: 0.04em;
}

.pd-feature__text .num {
	font-family: 'Manrope', sans-serif;
}

.pd-store {
	display:         flex;
	justify-content: center;
	padding:         64px var(--gutter) 0;
}

.pd-store__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
    font-size: 16px;
    letter-spacing: 0.22em;
    border-bottom: 1px solid var(--color-text);
    transition: opacity 0.3s;
    font-family: var(--font-mincho);
}

.pd-store__link:hover {
	opacity: 0.5;
}

/* pd-store__link の → を + に */
.pd-store__link::after {
	content:        '+';
	font-size:      18px;
	font-family:    sans-serif;
	font-weight:    300;
	line-height:    1;
	margin-left:    10px;
	vertical-align: middle;
	margin-top:     -2px;
	display:        inline-block;
}

/* ============================================================
   Store Modal
   ============================================================ */
.store-modal-overlay {
	position:         fixed;
	inset:            0;
	background:       rgba(0, 0, 0, 0.45);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	z-index:          1000;
	opacity:          0;
	visibility:       hidden;
	transition:       opacity 0.3s, visibility 0.3s;
}

.store-modal-overlay.is-open {
	opacity:    1;
	visibility: visible;
}

.store-modal {
	background:    #fff;
	box-shadow:    0 8px 40px rgba(0, 0, 0, 0.18);
	padding:       48px 56px;
	width:         min(480px, 90vw);
	position:      relative;
	opacity:       0;
	transform:     translateY(20px);
	filter:        blur(3px);
	transition:
		opacity   0.6s cubic-bezier(0.22, 1, 0.36, 1),
		filter    0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.store-modal-overlay.is-open .store-modal {
	opacity:   1;
	transform: translateY(0);
	filter:    blur(0px);
}

.store-modal__close {
	position:    absolute;
	top:         7px;
	right:       10px;
	background:  none;
	border:      none;
	font-size:   22px;
	cursor:      pointer;
	color:       var(--color-text);
	line-height: 1;
	padding:     4px;
}

.store-modal__title {
	font-size:      15px;
	letter-spacing: 0.12em;
	text-align:     center;
	padding-bottom: 12px;
	border-bottom:  1px solid #111;
	margin-bottom:  28px;
	font-weight:    500;
	font-family:    "Zen Kaku Gothic New", sans-serif;
}

.store-modal__list {
	display:        flex;
	flex-direction: column;
	gap:            20px;
}

.store-modal__item {
	text-align: center;
}

.store-modal__item a {
	display:        inline-flex;
	align-items:    center;
	font-size:      14px;
	letter-spacing: 0.18em;
	line-height:    1;
	transition:     opacity 0.3s;
	font-family:    "Zen Kaku Gothic New", sans-serif;
}

.store-modal__item a:hover {
	opacity: 0.5;
}

.store-modal__item a::after {
	content:        '';
	display:        inline-block;
	width:          4px;
	height:         4px;
	border-top:     1px solid currentColor;
	border-right:   1px solid currentColor;
	transform:      rotate(45deg);
	margin-left:    8px;
	vertical-align: middle;
	margin-top:     -2px;
}


/* ==========================================================================
   Product Detail — Specification
   ========================================================================== */
.pd-spec {
	max-width: var(--max-width);
	margin:    0 auto;
	padding:   80px var(--gutter) 120px;
  font-weight: 400;
}

.pd-spec__header {
	display:       flex;
	align-items:   flex-end;
	gap:           16px;
	margin-bottom: 40px;
}

.pd-spec__header-line {
	flex-shrink: 0;
	align-self:  center;
	width:       48px;
	height:      1px;
	background:  var(--color-text);
}

.pd-spec__header-en {
  font-size:      26px;
	font-weight:    700;
	letter-spacing: 0.22em;
  font-family:    var(--font-mincho);
  line-height:    1;
}

.pd-spec__header-note {
	font-size:      14px;
	letter-spacing: 0.12em;
	color:          var(--color-muted);
	line-height:    1;
}

.pd-spec__table {
	width: 100%;
	font-family: var(--font-number);
}

.pd-spec__row {
	display:       flex;
	gap:           48px;
	padding:       18px 0;
	border-bottom: 1px solid var(--color-border);
}

.pd-spec__row:first-child {
	border-top: 1px solid var(--color-border);
}

.pd-spec__term {
	flex-shrink:    0;
	width:          140px;
	font-size:      14px;
	font-weight:    600;
	line-height:    1.9;
	letter-spacing: 0;

}

.pd-spec__desc {
	font-size:      14px;
	line-height:    1.9;
	letter-spacing: 0.04em;
	color:          var(--color-text);
	font-family: var(--font-number);
}

@media screen and (max-width: 1280px){
	.concept__message-inner{
		display: block;
	}

	.concept__lead{
		font-size: 43px;
	}

	.concept__message-left{
		margin: 0 0 20px;
	}
	
	.concept__message-right{
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0;
		justify-content: space-between;
	}
}


/* ==========================================================================
   Responsive — SP (768px以下)
   ========================================================================== */
@media screen and (max-width: 768px) {

	:root {
		--gutter:       20px;
		--header-height: 60px;
	}

	/* ---- br ユーティリティ ---- */
	.br-sp { display: inline; }
	.br-pc { display: none;   }

	/* ---- Header ---- */
	.header{
		border-bottom: 1px solid #f7f7f7;
	}
	.header__nav { display: none; }
	.drawer      { display: flex; }

	.nav-toggle {
		position:        relative;
		z-index:         110;
		display:         flex;
		flex-direction:  column;
		justify-content: center;
		width:           30px;
		height:          30px;
		cursor:          pointer;
	}

	.nav-toggle span {
		position:         absolute;
		left:             0;
		display:          block;
		width:            100%;
		height:           1px;
		background-color: #333;
		transition:       transform 0.3s ease, top 0.3s ease;
	}

	.nav-toggle span:first-child { top: 10px; }
	.nav-toggle span:last-child  { top: 20px; }

	.nav-toggle.is-active span:first-child { top: 15px; transform: rotate( 45deg); }
	.nav-toggle.is-active span:last-child  { top: 15px; transform: rotate(-45deg); }

	/* ---- Drawer ---- */
	.drawer {
		position:        fixed;
		top:             0;
		left:            0;
		z-index:         105;
		display:         flex;
		justify-content: center;
		align-items:     center;
		width:           100%;
		height:          100vh;
		opacity:         0;
		visibility:      hidden;
		background:      #000;
		transition:      opacity 0.5s ease, visibility 0.5s ease;
	}

	.drawer.is-active {
		opacity:    1;
		visibility: visible;
	}

	.nav-toggle.is-active span {
		background-color: #fff !important;
	}

	.header__logo img {
		width: 120px;
	}

	.header.is-active .header__logo {
		position: relative;
		z-index:  110;
		filter:   invert(1) brightness(2);
	}

	.drawer__inner {
		width:     80%;
		max-width: 400px;
	}

	.drawer__list {
		list-style:    none;
		margin-bottom: 60px;
	}

	.drawer__list li {
		margin: 40px 0;
	}

	.drawer__list a {
		display:        flex;
		align-items:    center;
		justify-content: center;
		font-size:      24px;
		font-weight:    800;
		letter-spacing: 0.2em;
		color:          #fff;
	}

	/* ---- Hero ---- */
	.hero__image-wrapper {
		height: 85vh;
		max-height: none;
	}

	.hero-slide{
		top: 0;
	}

	.hero__content {
		bottom:          40px;
		left:            50%;
		width:           100%;
		justify-content: center;
		transform:       translateX(-50%);
	}

	.hero__content-text {
		text-align: center;
	}

	.hero__dots  { display: none; }
	.hero__scroll { display: none; }

	/* ---- Product Slider ---- */
	.product {
		padding: 80px 0 60px;
	}

	.product__slider-container {
		margin:                    0;
		overflow-x:                auto;
		scroll-snap-type:          x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.product__slider-wrapper {
		padding: 0;
	}

	.product__slider-inner {
		display:    flex;
		gap:        0;
		padding:    0 20px;
		transition: none;
	}

	.product__card {
		flex:              0 0 82%;
		margin-right:      15px;
		scroll-snap-align: center;
	}

	.product__img {
		aspect-ratio: 1 / 0.7;
	}

	.product__info {
		display: block;
	}

	.product__pagination {
		display:         flex;
		justify-content: center;
		gap:             6px;
		margin-top:      25px;
	}

	.product__dot {
		width:  25px;
		height: 3px;
	}

	.product__arrow-link {
		display: none;
	}

	/* ---- Concept (TOP) ---- */
	.concept__header {
		max-width: 100%;
		padding:   0 var(--gutter) 40px;
	}

	.concept__message {
		padding: 80px 0;
	}

	.concept__message-inner {
		grid-template-columns: 1fr;
		gap:                   20px;
	}

	.concept__lead {
        font-size: 8vw;
        line-height: 1.7;
	}

	.concept__text-jp{
		font-size: 18px;
	}

	.concept__description{
		font-size: 13px;
	}

	.concept__link-detail{
		width: 62px;
	}

	/* ---- Footer ---- */
	.footer__top-button {
		justify-content: center;
		padding-right:   0;
	}

	.footer__top-row {
		flex-direction: column;
		gap:            48px;
	}

	.footer__nav  { flex-direction: column; gap: 40px; }
	.footer__list { flex-direction: column; gap: 40px; }

	.footer__bottom {
		flex-direction: column;
		gap:            20px;
	}

	/* ---- Page Hero ---- */
	.page-hero {
		padding-top:    calc(var(--header-height) + 100px);
		padding-bottom: 90px;
	}

	.page-hero .section-title__main {
		font-size: 32px;
	}

	/* ---- Product List ---- */
	.product-category__header{
		flex-direction: column;
	}

	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-item__name{
		font-size: 14px;
	}

	/* ---- Company ---- */
	.company-info {
		padding: 0 var(--gutter) 160px;
	}

	.company-table__row {
		gap:     24px;
		padding: 22px 0;
	}

	.company-table__term {
		width:     72px;
		font-size: 12px;
	}

	.company-table__desc {
		font-size: 12px;
	}

	/* ---- Concept Lead/Blocks ---- */
	.concept-lead {
		padding: 100px 0 40px 0;
	}

	.concept-lead__inner{
		gap: 30px;
	}

	.concept-text-block{
		margin-bottom: 60px;
	}

	.concept-lead__logo {
		width: 250px;
		height: 250px;
	}

	.concept-lead__title {
		font-size: 8vw;
		white-space: normal;
		margin: 0 0 0 5%;
	}

	.concept-lead__brand-text,
	.concept-lead__text-jp,
	.concept-block__text{
		font-size: 16px;
		letter-spacing: 0.15em;
	}

	.concept-block {
		grid-template-columns: 55% 1fr;
	}

	.concept-block--img-right {
		grid-template-columns: 1fr 55%;
	}

	.concept-block__body {
		padding: 0;
		width:   100%;
	}

	.concept-block__image{
		width: 100%;
	}

	.concept-images-row__item .concept-logo-overlay{
		top: 9vw;
	}

	.concept-images-row{
		border-radius: 0;
	}

	/* ---- Product Detail ---- */
	.pd-hero__image-wrap {
		aspect-ratio: 1 / 1;
	}

	.pd-hero__image-wrap img {
		transform: scale(1.6);
		object-position: top;
		animation: pd-hero-zoom-sp 1.5s ease-out forwards;
	}
	@keyframes pd-hero-zoom-sp {
	from { transform: scale(1.45); }
	to   { transform: scale(1.6); }
	}

	.pd-intro {
		padding: 40px var(--gutter) 140px;
	}

	.pd-intro__inner {
		gap: 32px;
	}

	.pd-intro__thumb {
		width: 160px;
	}

	.pd-intro__name {
		font-size: 20px;
	}

	.pd-intro__catch {
		font-size: 20px;
	}

	.pd-intro__text {
		font-size: 13px;
	}

	.pd-feature__header {
		margin-bottom: 32px;
	}

	.pd-feature__header-en {
		font-size: 18px;
	}

	.pd-feature__header-line {
		width: 22px;
	}

	.pd-feature__header-note {
		font-size: 12px;
	}

	.pd-feature__body {
		padding: 0 30px;
	}

	.pd-feature__num {
		font-size:     32px;
		margin-bottom: 12px;
	}

	.pd-feature__block{
		align-items: start;
	}

	.pd-feature__text {
		font-size:   12px;
		line-height: 2;
	}

	.pd-store__link {
		font-size: 12px;
	}

	.pd-spec {
		padding: 60px var(--gutter) 180px;
	}

	.pd-spec__header-en {
		font-size: 16px;
	}

	.pd-spec__header-line {
		width: 22px;
	}

	.pd-spec__header-note {
		font-size: 12px;
	}

	.pd-spec__row {
		gap: 15px;
	}

	.pd-spec__term {
        width: 30%;
        font-size: 11px;
	}

	.pd-spec__desc {
		font-size:   12px;
	}

}


/* ==========================================================================
   Product Detail — Color Variant Selector
   ========================================================================== */
 
/* カラーUI 全体 */
.pd-color {
  margin: 5px 0 13px;
  text-align: center;
}
 
/* スウォッチ横並びリスト */
.pd-color__list {
  display:         flex;
  justify-content: center;
  gap:             15px;
  list-style:      none;
}
 
/* 各カラーアイテム（スウォッチ + ラベル縦並び） */
.pd-color__item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1px;
  cursor:         pointer;
}
 
/* スウォッチボタン：外枠（アクティブ時にボーダー表示） */
.pd-color__swatch {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            33px;
  height:           33px;
  padding:          0;
  border:           1.5px solid transparent;
  border-radius:    50%;
  background:       transparent;
  cursor:           pointer;
  transition:       border-color 0.25s ease;
}
 
.pd-color__item.is-active .pd-color__swatch,
.pd-color__item:hover     .pd-color__swatch {
  border-color: var(--color-text);
}
 
/* スウォッチの色丸（内側） */
.pd-color__swatch-inner {
  display:       block;
  width:         24px;
  height:        24px;
  border-radius: 50%;
  border:        1px solid rgba(0,0,0,0.08);
}
 
/* カラーラベル文字 */
.pd-color__name {
  font-size:      10px;
  letter-spacing: 0.07em;
  color:         var(--color-text);
  transition:     color 0.25s ease;
}
 
.pd-color__item.is-active .pd-color__name,
.pd-color__item:hover     .pd-color__name {
font-weight: 700;
}
 
 
/* ==========================================================================
   Product Detail — Color Variant Selector (SP)
   ========================================================================== */
@media screen and (max-width: 768px) {
 
  .pd-color {
    margin-top: 5px;
  }
 
  .pd-color__list {
    gap: 14px;
  }
 
  .pd-color__swatch {
    width:  32px;
    height: 32px;
  }
 
  .pd-color__swatch-inner {
    width:  20px;
    height: 20px;
  }
 
  .pd-color__name {
    font-size: 8px;
  }

}

@media (min-width: 1920px) {
	.hero-slide {
		width: 104%;
	}
}

@media (min-width: 2350px) {
	.hero-slide {
		width: 75%;
		left: 10%;
	}
	.hero__image-wrapper{
		background: #8c8c8c;
		max-height: 1200px;
	}
}