:root {
	--fz70: calc(70 / 16 * 1rem);
	--fz60: calc(60 / 16 * 1rem);
	--fz50: calc(50 / 16 * 1rem);
	--fz48: calc(48 / 16 * 1rem);
	--fz42: calc(42 / 16 * 1rem);
	--fz40: calc(40 / 16 * 1rem);
	--fz35: calc(35 / 16 * 1rem);
	--fz32: calc(32 / 16 * 1rem);
	--fz30: calc(30 / 16 * 1rem);
	--fz29: calc(29 / 16 * 1rem);
	--fz28: calc(28 / 16 * 1rem);
	--fz27: calc(27 / 16 * 1rem);
	--fz26: calc(26 / 16 * 1rem);
	--fz25: calc(25 / 16 * 1rem);
	--fz24: calc(24 / 16 * 1rem);
	--fz23: calc(23 / 16 * 1rem);
	--fz22: calc(22 / 16 * 1rem);
	--fz21: calc(21 / 16 * 1rem);
	--fz20: calc(20 / 16 * 1rem);
	--fz19: calc(19 / 16 * 1rem);
	--fz18: calc(18 / 16 * 1rem);
	--fz17: calc(17 / 16 * 1rem);
	--fz16: calc(16 / 16 * 1rem);
	--fz15: calc(15 / 16 * 1rem);
	--fz14: calc(14 / 16 * 1rem);
	--fz13: calc(13 / 16 * 1rem);
	--fz12_5: calc(12.5 / 16 * 1rem);
	--fz12: calc(12 / 16 * 1rem);
	--fz11: calc(11 / 16 * 1rem);
	--fz10: calc(10 / 16 * 1rem);
	--fz9: calc(9 / 16 * 1rem);
	--fz8: calc(8 / 16 * 1rem);

	--lh-body: 2.0;
	--lh-heading: 1.35;
	--lh-tight: 1.15;

	--blue: #042C76;
	--blue-translucent: rgba(4,44,118,0.5);

	--gold: #C69D4C;
	--l-gold: #ddc69d;

	--space-side-sp: 5%;
}

@media (max-width: 767px) {
	:root {
		--fz70: clamp(0.625rem, 19.0vw, 4.375rem);
		--fz60: clamp(0.625rem, 17.0vw, 3.75rem);
		--fz50: clamp(0.625rem, 14.8vw, 3.125rem);
		--fz48: clamp(0.625rem, 14.31vw, 3rem);
		--fz42: clamp(0.625rem, 12.31vw, 2.625rem);
		--fz40: clamp(0.625rem, 11.31vw, 2.5rem);
		--fz35: clamp(0.625rem, 9.31vw, 2.1875rem);
		--fz32: clamp(0.625rem, 8.54vw, 2rem);
		--fz30: clamp(0.625rem, 7.99vw, 1.875rem);
		--fz29: clamp(0.625rem, 7.74vw, 1.8125rem);
		--fz28: clamp(0.625rem, 7.43vw, 1.75rem);
		--fz27: clamp(0.625rem, 7.19vw, 1.6875rem);
		--fz26: clamp(0.625rem, 6.92vw, 1.625rem);
		--fz25: clamp(0.625rem, 6.66vw, 1.5625rem);
		--fz24: clamp(0.625rem, 6.40vw, 1.5rem);
		--fz23: clamp(0.625rem, 6.13vw, 1.4375rem);
		--fz22: clamp(0.625rem, 5.84vw, 1.375rem);
		--fz21: clamp(0.625rem, 5.43vw, 1.3125rem);
		--fz20: clamp(0.625rem, 5.33vw, 1.25rem);
		--fz19: clamp(0.625rem, 5.05vw, 1.1875rem);
		--fz18: clamp(0.625rem, 4.78vw, 1.125rem);
		--fz17: clamp(0.625rem, 4.54vw, 1.0625rem);
		--fz16: clamp(0.625rem, 4.25vw, 1rem);
		--fz15: clamp(0.625rem, 4.0vw, 0.9375rem);
		--fz14: clamp(0.625rem, 3.72vw, 0.875rem);
		--fz13: clamp(0.625rem, 3.47vw, 0.8125rem);
		--fz12_5: clamp(0.625rem, 3.32vw, 0.78125rem);
		--fz12: clamp(0.625rem, 3.19vw, 0.75rem);
		--fz11: clamp(0.5625rem, 2.94vw, 0.6875rem);
		--fz10: clamp(0.5rem, 2.70vw, 0.625rem);
		--fz9: clamp(0.4375rem, 2.5vw, 0.5625rem);
		--fz8: clamp(0.375rem, 2.2vw, 0.5rem);
	}
}


html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after{
	box-sizing:border-box;
}


/* 表示アニメーション
--------------------------------------------- */
body{
	animation: fadein 2s forwards;
}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}


/* 基本部分
--------------------------------------------- */

body,
button,
input,
select,
optgroup,
textarea {
	color: #303030;
	font-size:var(--fz15);
	line-height: var(--lh-body);
	font-family: sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.05em;
}

body {
	background-color: #f3f3f3;
	margin:0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	font-weight:400;
	margin:0;
	clear: both;
}

p {
	margin-bottom: 0;
}

p + h2, p + h3, p + h4,
table + h2, table + h3, table + h4{
	margin-top:50px;
}

p + p {
	margin-top: 2.75em;
}

a{
	color: var(--blue);
	text-decoration:none;
	background-color: transparent;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
}

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

address{
	font-style:normal;
}

@media (max-width: 767px) {
	
}

.u-serif-ja{
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}
.u-serif-ja b{
	font-weight: 600;
}
.u-serif-en{
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

.c-btn-link a{
    border-bottom: 1px solid var(--blue-translucent);
    padding: 0 0.75em;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.8;
}

.c-section-band--blue .c-btn-link a{
	color:#fff;
	border-color: rgba(255, 2455, 255, 0.5);
}

@media (max-width: 767px) {
	body,
	button,
	input,
	select,
	optgroup,
	textarea {
		font-size:var(--fz14);
	}
}


/* parts */
.u-contents-width{
	max-width:950px;
	width:90%;
	margin:0 auto
}
.u-contents-width-wide{
	max-width:1100px;
	width:90%;
	margin:0 auto
}

.u-text-center{
	text-align:center;
}
.u-text-right{
	text-align:right;
}

.u-right{
	margin-left:auto;
}
.u-center{
	margin-left:auto;
	margin-right:auto;
}

.u-visually-hidden{
	position:absolute !important;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

.is-flex {
	display: flex;
}
ul.is-flex,
ul.is-flex-pc,
ol.is-flex,
ol.is-flex-pc{
	padding:0;
	margin:0;
	list-style:none;
}

.u-blue{
	color:var(--blue);
}

.effect {
	opacity: 0;
}

.effect.is-active {
	-webkit-animation-name: fadeup;
	animation-name: fadeup;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@-webkit-keyframes fadeup {
  0% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes fadeup {
  0% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

/* =================================================
	Products utilities（2列/3列の汎用）
================================================= */
.u-flex-cols{
	display:flex;
	flex-wrap:wrap;
	gap:var(--row-gap, 60px) var(--col-gap, 8.5%);
}
.u-flex-cols > *{
	flex:0 0 calc((100% - (var(--col-gap) * (var(--cols) - 1))) / var(--cols));
}

/* 2列・3列（必要なら数値だけ調整） */
.u-cols-2{
	--cols:2;
	--col-gap:8.5%;
	--row-gap:80px;
}
.u-cols-3{
	--cols:3;
	--col-gap:5%;
	--row-gap:60px;
}

@media (min-width: 768px) {
	.is-flex-pc {
		display: flex;
	}
	.u-row-reverse{
		flex-direction: row-reverse;
	}
}

.c-inner{
	max-width: 950px;
	width: 90%;
	margin: 0 auto;
	transition: all 0.3s ease-in-out 0s;
}

.c-inner--wide{
	max-width: 1100px;
}

@media (min-width: 1440px){
	.c-inner{
		max-width: 1050px;
	}
	.c-inner--wide{
		max-width: 1200px;
	}
}

@media (min-width: 1600px){
	.c-inner{
		max-width: 1200px;
	}
	.c-inner--wide{
		max-width: 1350px;
	}
}


.c-title{
	display: grid;
	gap: .5em;
	margin-bottom: 8vw;
}
.c-title__main{
	font-size: var(--fz50);
	color:var(--blue);
	line-height: var(--lh-heading);
	letter-spacing: 0.12em;
}
[data-block="dark"] .c-title__main{
	color:#fff;
}
.c-title__sub{
	font-size: var(--fz24);
	line-height: 1.6;
}
.c-title--center{
	text-align:center;
}
@media (max-width: 767px) {
	.c-title__main{
		font-size: var(--fz30);
		letter-spacing: 0.1em;
	}
}




@media (min-width: 768px) {
	.is-pc-none {
		display: none;
	}
}
@media (max-width: 767px) {
	.is-sp-none {
		display: none;
	}
}




/* Header */
.c-header{
	padding-top: 2rem;
	position:fixed;
	top:0;
	left:0;
	right:0;
    z-index: 6;
}
.c-header__inner{
	display:flex;
	justify-content: space-between;
	align-items: center;
    width: 95%;
    max-width: 1500px;
	margin: auto;
}
.c-header__logo{
	max-width:230px;
	position: relative;
	z-index: 4;
}


/* =========================================
   Header Hide Until Hero Ends
========================================= */

.c-header{
	transform:translateY(-100%);
	transition:transform .7s cubic-bezier(.22,.61,.36,1);
	will-change:transform;
}

/* Hero終了後 */
body.is-hero-finished .c-header{
	transform:translateY(0);
}


/* Hamburger menu */

.c-hamburger {
	position: relative;
	top: 0;
	right: 0;
	z-index: 1000;
	width: 85px;
	height: 8px;
	padding: 0px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	transition: all 0.3s ease-in-out 0s;
}
.c-hamburger__line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #fff;
	transition: all .6s;
}
/* light zone（黒） */
body.is-header-logo-black .c-hamburger__line{
	background-color:var(--blue);
}
body.is-menu-open .c-hamburger__line{
	background-color:#fff;
}
.c-hamburger__line:nth-of-type(1) { top: 0; }
.c-hamburger__line:nth-of-type(2) { top: 100%; }
.c-hamburger.active .c-hamburger__line {
	background-color: #fff;
}
.c-hamburger.active .c-hamburger__line:nth-of-type(1) {
	transform: translateY(4px) rotate(-5deg);
}
.c-hamburger.active .c-hamburger__line:nth-of-type(2) {
	transform: translateY(-4px) rotate(5deg);
}

.nav-overlay {
	position: fixed;
	top: 0;
	right: 0;
	z-index:3;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.0);
	transition: all 0.3s ease-in-out 0s;
	pointer-events: none;
}
.nav-overlay.active{
	background-color: rgba(0,0,0,0.5);
	pointer-events:auto;
}
.nav-overlay .nav-overlay__content {
	position: relative;
	right:-100%;
	z-index:3;
	width: 100%;
	max-width:450px;
	height: 100vh;
	color:#fff;
	background-color: var(--blue);
	padding: 120px 3% 80px;
	margin-left: auto;
	transition: all 0.3s ease-in-out 0s;
}
.nav-overlay.active .nav-overlay__content {
	right: 0;
	opacity: 1;
	visibility: visible;
/* 	overflow-y: scroll; */
}
.nav-overlay__content a{
	display: block;
	color:#fff;
}
.nav-overlay__content nav ul{
	padding:0;
	margin:0;
	list-style:none;
}
.nav-overlay__content nav ul li{
	width:100%;
}
.nav-overlay__content nav > ul > li > a{
	font-size: var(--fz30);
	letter-spacing: 0.1em;
	padding:0.25em 0;
}
.nav-overlay .c-footer__copyright{
	position: absolute;
    left: 50%;
    bottom: 5vw;
    transform: translateX(-50%);
}


@media (max-width: 767px) {
	.c-header {
    	padding-top: 1.5rem;
    }
    .c-header__inner{
	    width: 90%;
    }
    .c-header__inner::before{
	    content:"";
	    display:block;
	    width: 55px;
    }
    .c-header__logo{
	    width:40%;
    }
    .c-hamburger{
	    width: 55px;
    }
    .c-hamburger.active .c-hamburger__line:nth-of-type(1) {
	    transform: translateY(4px) rotate(-8deg);
	}
	.c-hamburger.active .c-hamburger__line:nth-of-type(2) {
	    transform: translateY(-4px) rotate(8deg);
	}
	.nav-overlay__content nav > ul > li > a {
	    font-size: var(--fz22);
	    letter-spacing: 0.1em;
	    padding: 0.5em 0;
	}

}


/* Hero */
.c-hero{
	height:100svh;
	margin-bottom: 5vw;
	position:relative;
}
.c-hero .logo{
	width: 34%;
	max-width:550px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:5;
}
.c-hero .around{
	width: 100%;
    max-width: 1700px;
    margin: auto;
	position:absolute;
	inset: 0;
	z-index:4;
}
.c-hero .around__inner{
	width:100%;
	height:105svh;
	position:relative;
	overflow:hidden;
}
.c-hero .around__item{
	position:absolute;
}
.c-hero .around__item::before{
	content:"";
	display:block;
	background:url(../img/hero_around_img01_border.webp) center center no-repeat;
	background-size:100% 100%;
	position:absolute;
	inset:4px;
	z-index: 1;
}
.c-hero .around__item:nth-child(1){
	width:35%;
/* 	top:15%; */
	top:0.4%;
	left:53%;
}
.c-hero .around__item:nth-child(2){
	width:30%;
/* 	top:40%; */
	top:22%;
	left:15%;
}
.c-hero .around__item:nth-child(2)::before{
	background-image:url(../img/hero_around_img02_border.webp);
}
.c-hero .around__item:nth-child(3){
	width: 25%;
/*     top: 75%; */
    bottom: 12%;
    left: 10%;
}
.c-hero .around__item:nth-child(3)::before{
	background-image:url(../img/hero_around_img03_border.webp);
}
.c-hero .around__item:nth-child(4){
	width:28%;
/* 	top:86%; */
	bottom:5%;
	left:51%;
}
.c-hero .around__item:nth-child(5){
	width: 27%;
/*     top: 65%; */
    bottom: 23%;
    left: 87%;
}
.c-hero .around__item:nth-child(5)::before{
	background-image:url(../img/hero_around_img05_border.webp);
}
.c-hero .around__item:nth-child(6){
    width: 20%;
/*     top: 29%; */
    top: 15%;
    left: 90%;
}

.c-hero .bg{
    height: 108svh;
	background-color: var(--blue);
    background-image: url(../img/lattice_pattern.webp);
	padding-bottom: 8vh;
    overflow: hidden;
}
.c-hero .bg::before{
    content:"";
    display:block;
    width:100%;
    height:100svh;
    background: url(../img/hero_bg_circle.webp) center top no-repeat;
    background-size: 80%;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
    opacity:0;
	transition:opacity 1.5s ease;
	transition-delay: 1s;
}
.c-hero .bg::after{
    content:"";
    display:block;
    width:100%;
    height:20svh;
    background-image: linear-gradient(transparent, #f3f3f3 62%);
    position:absolute;
    left:0;
    bottom:0;
    z-index:0;
}
.c-hero .bg img{
	width:100%;
	height:100%;
	position:relative;
    z-index:1;
	opacity:1;
	object-fit:cover;
}
@media (max-width: 767px) {
	.c-hero .bg img{
		height:101%;
	}
}


/* =========================================
	Hero Animation
========================================= */

/* BG：最初は見えない */
.c-hero .bg{
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity 1s ease;
	z-index:0;
}

/* BG画像：フェード後に「ぼかし＋暗さ」へ */
.c-hero .bg img{
	width:100%;
	height:100%;
	object-fit:cover;
	filter:blur(0px) brightness(1);
	transform:scale(1);
	transition:
		filter 1.2s cubic-bezier(.4,0,.2,1),
		transform 2.5s cubic-bezier(.22,.61,.36,1),
		opacity 1s ease;
}

/* 暗さをもう少し出したい場合のオーバーレイ（任意） */
.c-hero::before{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0);
	transition:background 1.2s ease;
	z-index:0;
	pointer-events:none;
}

.c-hero::after{
	content:"";
	width:100%;
	height:0vh;
	opacity:0;
	position:absolute;
	left:0;
	right:0;
	bottom:-8vh;
	background-image: linear-gradient(transparent, #f3f3f3 100%);
	transition:opacity 1.0s ease;
	z-index:2;
	pointer-events:none;
}

/* around / logo 初期状態 */
.c-hero .logo{
	opacity:0;
	transform:translate(-50%,-50%) scale(1.05);
	will-change:opacity, transform;
}

.c-hero .around__item{
	--hero-shift-y: 0px;
	opacity:0;
	transform:translate(-50%,0) translateY(var(--hero-shift-y));
	will-change:opacity, transform;
	overflow:hidden;
}
.c-hero .around__item img{
	transform:scale(1.05);
	will-change:transform;
}

/* around-item wrapper：フェードのみ */
@keyframes heroFadeIn{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

/* img：スケールのみ */
@keyframes heroImgScaleIn{
	0%{
		transform:scale(1.05);
	}
	100%{
		transform:scale(1);
	}
}

/* logo の表示アニメ（少し上品に） */
@keyframes heroLogoIn{
	0%{
		opacity:0;
		transform:translate(-50%,-50%) scale(1.05);
	}
	100%{
		opacity:1;
		transform:translate(-50%,-50%) scale(1.00);
	}
}

/* JSが body に付けるクラスで開始 */
body.is-hero-anim .c-hero .bg,
body.is-hero-skip .c-hero .bg{
	opacity:1;
}

/* フェード後に「背景化」 */
body.is-hero-bg-dim .c-hero .bg img,
body.is-hero-skip .c-hero .bg img{
	filter:blur(12px) brightness(0.75);
	transform:scale(1.08);
	opacity:0.5;
}
body.is-hero-bg-dim .c-hero::before,
body.is-hero-skip .c-hero::before{
/* 	background:rgba(0,0,0,0.22); */
}
body.is-hero-bg-dim .c-hero::after,
body.is-hero-skip .c-hero::after{
	opacity:1;
}
body.is-hero-bg-dim .c-hero .bg::before{
    opacity:1;
}

/* around / logo を最終状態に固定 */
body.is-hero-skip .c-hero .around__item{
	--hero-shift-y: 0px;
	opacity:1;
	animation:none !important;
	transform:translate(-50%,0%) translateY(var(--hero-shift-y));
}

body.is-hero-skip .c-hero .around__item img{
	transform:scale(1);
	animation:none !important;
}

body.is-hero-skip .c-hero .logo{
	opacity:1;
	transform:translate(-50%,-50%) scale(1);
	animation:none !important;
}

@media (max-width: 767px) {
	.c-hero .logo{
		width: 75%;
	}
	.c-hero .around__item::before {
		inset: 2px;
	}
	.c-hero .around__item:nth-child(1) {
	    width: 62%;
/* 	    top: 22%; */
	    top: 10%;
	    left: 39%;
	}
	.c-hero .around__item:nth-child(2) {
	    width: 58%;
/* 	    top: 48%; */
	    top: 37%;
	    left: 15%;
	}
	.c-hero .around__item:nth-child(3) {
	    width: 45%;
/* 	    top: 72%; */
	    bottom: 20%;
	    left: 8%;
	}
	.c-hero .around__item:nth-child(4) {
	    width: 53%;
/* 	    top: 90.5%; */
	    bottom: 5%;
	    left: 45%;
	}
	.c-hero .around__item:nth-child(5) {
	    width: 50%;
/* 	    top: 68%; */
	    bottom: 23%;
	    left: 75%;
	}
	.c-hero .around__item:nth-child(6) {
	    width: 42%;
/* 	    top: 32%; */
	    top: 23%;
	    left: 85%;
	}
}


/* Concept */

.c-about{
	padding:12vw 0 6vw;
}
.c-about .c-inner{
	margin-bottom:10vw
}
.c-about .c-inner.is-flex-pc > *{
	flex:1;
}
.c-about .c-about__lead{
	font-size:clamp(1.6rem, 5vw, 3.125rem);
	line-height: 1.7;
	letter-spacing: 0.15em;
	margin-left: 5%;
}
.c-about .text{
	font-size:var(--fz14);
	line-height:2.8;
	letter-spacing: 0.2em;
}
.c-about__tagline{
	font-size:clamp(28px, 4.85vw, 73px);
	color:var(--l-gold);
	text-transform: uppercase;
	line-height: 1;
/* 	opacity:0.6; */

	position:relative;
	overflow:hidden;
	white-space:nowrap;
	text-align:left;
}

.c-about__tagline.is-marquee{
	padding:0.15em 0;
}

.c-about__tagline .c-marquee{
	display:flex;
	width:max-content;
	will-change:transform;
	animation:tagline-marquee 20s linear infinite;
	animation-play-state:paused;
}

.c-about__tagline.is-active .c-marquee{
	animation-play-state:running;
}

.c-about__tagline .c-marquee__item{
	display:inline-flex;
	align-items:center;
	flex:none;
	padding-right:0.8em;
}

@keyframes tagline-marquee{
	0%{ transform:translateX(0); }
	100%{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
	.c-about__tagline .c-marquee{
		animation:none;
	}
}

@media (max-width: 767px) {
	.c-about{
		padding-top:20vw;
	}
	.c-about .c-about__lead{
		letter-spacing: 0.1em;
		margin-left: 0;
		margin-bottom: 1em;
	}
	.c-about .text{
		letter-spacing: 0.05em;
		line-height: 2.5;
	}
	.c-about__tagline{
		font-size: 12vw;
	}

}


/* Products */
.c-products{
	padding-top: 5vw;
	padding-bottom: 15vw;
}
.c-products > .c-inner > section + section{
	margin-top:15vw;
}
.c-product-item__main{
	gap:8.5%;
	align-items: flex-start;
}
.c-product-item__main .c-product-item__body{
	flex:4;
}
.c-product-item__main .c-frame-image{
	flex:5;
}
.c-series-meta{
	color:var(--blue);
	justify-content: space-between;
	border-bottom:1px solid var(--blue);
	padding-bottom: 0.2rem;
	margin-bottom: 2rem;
}
.c-series-meta__label,
.c-series-meta__num{
	font-size:var(--fz12);
	margin:0;
}
.c-series-name{
	color:var(--blue);
	letter-spacing: 0.15rem;
	margin-bottom:1.5rem;
}
.c-series-name__main{
	font-size:var(--fz27);
	line-height: var(--lh-heading);
}
.c-series-name__sub{
	font-size:var(--fz14);
}
.c-product-item--gift .c-product-item__children .c-series-name__main{
	font-size:var(--fz20);
}
.c-product-item--gift .c-product-item__children .c-series-name__sub{
	font-size:var(--fz12);
}
.c-product-category{
	margin-bottom: 3.5rem;
}
.c-product-category .c-series-name{
	flex: 0 0 350px;
}
.c-product-category .c-product-item__desc{
	flex:1;
}
ul.c-gift-item__packages{
	gap:5%;
	margin-top: 2.75rem;
}
.c-product-item--gift ul.c-gift-item__packages{
	margin-top: 1.0rem;
}
.c-product-item__price-row .package-image{
	max-width:60%;
}
ul.c-gift-item__packages > *{
	max-width:50%;
	width:100%;
}
.package-image + .c-price-block,
.c-gift-item__price{
	margin-top:1rem;
}
.c-product-item__body > .c-price-block,
.c-product-item__body > .c-gift-item__price{
	margin-top:2.5rem;
}
.c-product-item__body .c-product-item__price-row{
	justify-content: space-between;
	align-items:flex-end;
	margin-top: 2.75rem;
}
ul.c-product-item__packages{
	justify-content: space-around;
	gap:5%;
	margin-top: 2.75rem;
}
.c-product-item .c-taste{
	font-size:var(--fz12);
	font-weight: 500;
	color:var(--blue);
	margin-bottom: 0.25rem;
}

.c-products .c-price{
	display:inline-flex;
	align-items:baseline;
	gap:0.15em;
	font-size:var(--fz14);
	line-height:var(--lh-tight);
	margin:0;
}
.c-products .c-price-block + .c-price-block{
	margin-top:0.5em;
}
.c-products .c-price__currency{
	font-size:1em;
}
.c-products .c-price__amount{
	font-size:var(--fz20);
	font-weight:bold;
}
.c-products .c-price__suffix{
	font-size:1em;
}
.c-products .c-price__unit{
	font-size:var(--fz10);
	font-weight:700;
	margin-right:0.25em;
}
.c-products .c-price .c-tax{
	font-size:var(--fz8);
}

@media (max-width: 767px) {
	.c-products{
		padding-top:23vw;
	}
	.c-series-meta{
		padding-bottom: 0;
	}
	.c-product-item__body .c-product-item__price-row .package-image{
		margin:auto;
	}
	.c-product-item__body .c-product-item__price-row .c-price-block{
		text-align:right;
	}
	ul.c-gift-item__packages{
		justify-content: space-around;
		margin-top: 1.75rem;
	}
	
	.c-product-item__packages .c-product-item__package{
		max-width:70%;
		margin: auto;
	}
	.c-product-item__packages .c-product-item__package +  .c-product-item__package{
		margin-top:20px;
	}
}

.c-gift-item__desc + .c-frame-image{
	margin-top:1.5rem;
}
.c-frame-image{
	--notch:22px;
	--bg:#f3f3f3;
	position:relative;
/* 	overflow:hidden; */
}
.c-frame-image::before,
.c-frame-image::after,
.c-frame-image .image-inner::before,
.c-frame-image .image-inner::after{
	content:"";
	position:absolute;
	width:calc(var(--notch)*2);
	aspect-ratio:1/1;
	border-radius:50%;
	background-color:var(--bg);
	z-index:2;
}
.c-frame-image::before{ top: calc(var(--notch) * -1); left: calc(var(--notch) * -1); }
.c-frame-image::after{  top: calc(var(--notch) * -1); right: calc(var(--notch) * -1); }
.c-frame-image .image-inner::before{ bottom: calc(var(--notch) * -1); left: calc(var(--notch) * -1); }
.c-frame-image .image-inner::after{  bottom: calc(var(--notch) * -1); right: calc(var(--notch) * -1); }

.c-frame-image .image-inner,
.c-frame-image img{
	display: block;
}

.c-frame-image .image-border{
	display:block;
	border:1px solid var(--gold);
	position:absolute;
	inset:3px;
	z-index:1;
}

@media (max-width: 767px) {
	.c-frame-image{
		margin-top:8vw;
		overflow:hidden;
	}
}

.c-variations{
	display:flex;
	flex-wrap:wrap;
	gap:30px 5%;
	padding:0 3%;
	margin:4.5vw 0 0;
	list-style:none;
	justify-content:space-between;
}
.c-variations > .c-variations__item{
	flex:0 0 calc((100% - (5% * 4)) / 5);
}
.c-variations-wide{
	justify-content:center;
/* 	gap:60px 80px; */
}
.c-variations-wide > .c-variations__item{
	flex:0 0 240px;
}

.c-variations > .c-variations__item a{
/* 	pointer-events: none; */
}

.c-product-item__children{
    flex-wrap:wrap;
	gap:80px 8.5%;
}
.c-product-item__children .c-gift-item{
	flex: 0 0 calc((100% - 8.5%) / 2);
}

.c-variations__name{
	font-size:var(--fz18);
	line-height: var(--lh-tight);
}
.c-variations__name .u-small{
	font-size:var(--fz10);
}
.c-variations__image{
	width:70%;
	max-width: 120px;
	margin: 0 auto 0.75rem;
}
.c-variations__image img{
	transition: .3s;
}
a:hover .c-variations__image img{
	transform: scale(1.12);
}
.c-variations-wide .c-variations__name{
	display:inline-block;
	position:relative;
}
.c-variations-wide .c-variations__name.c-dot::before{
	content:"";
	display:block;
	width:5px;
	aspect-ratio:1/1;
	background:var(--blue);
	border-radius:50%;
	position:absolute;
	top:50%;
	left:-1.2em;
	transform: translateY(-50%);
}
.c-variations-wide .c-variations__name.c-dot-lightburgundy::before{
	background-color:#7B1F29;
}
.c-variations-wide .c-variations__name.c-dot-yellow::before{
	background-color:#E1BF00;
}
.c-variations-wide .c-variations__name.c-dot-blue::before{
	background-color:#13378E;
}
.c-variations-wide .c-variations__name.c-dot-burgundy::before{
	background-color:#5B1F24;
}
.c-variations-wide .c-variations__name.c-dot-pink::before{
	background-color:#970046;
}
.c-variations-wide .c-variations__name.c-dot-darkgreen::before{
	background-color:#174033;
}
.c-variations-wide .c-variations__name.c-dot-burgundy::before{
	background-color:#5B1F24;
}
.c-variations-wide .c-variations__name.c-dot-darkburgundy::before{
	background-color:#231815;
}
.c-variations-wide .c-variations__name.c-dot-lightyellow::before{
	background-color:#D5D0B3;
}
.c-variations-wide .c-variations__name.c-dot-green::before{
	background-color:#4D7F37;
}

@media (max-width: 767px) {
	.c-variations {
	    margin-top: 10vw;
	}
	.c-variations > .c-variations__item {
	    flex: 0 0 calc((100% - (5% * 1)) / 2);
	}
	
	.c-product-item__children .c-gift-item + .c-gift-item{
		margin-top:15vw;
	}
	
	.c-variations-wide{
		gap: 50px 5%;
	}
	.c-variations-wide > .c-variations__item {
		flex: 0 0 100%;
	}
	.c-variations-wide .c-variations__item {
		display:flex;
		align-items: center;
		gap:10%;
	}
	.c-variations-wide .c-variations__image {
		width: 30%;
	    margin: 0;
	}
	.c-variations-wide .c-variations__text {
		width: 70%;
	}
	.c-variations-wide .c-variations__name {
	    display: block;
	}
}


.c-icon__or{
	display:flex;
	justify-content: center;
	align-items:center;
	width:24px;
	aspect-ratio:1/1;
	color:var(--blue);
	border-radius:50%;
	background-color:rgba(0,0,0,0.13);
	margin:0.5rem auto;
}
.c-icon__or::before{
	content:"or";
	font-size:var(--fz11);
	font-weight:bold;
	line-height:1;
	font-family:serif;
}



/* =========================================
	[Modal] 基本レイアウト（最小構成）
	・is-open で表示
	・背景フェード＋パネル中央表示
========================================= */

.c-modal{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1000;

	opacity:0;
	visibility:hidden;
	pointer-events:none;

	transition:
		opacity .35s ease,
		visibility 0s linear .35s;
}

.c-modal.is-open{
	opacity:1;
	visibility:visible;
	pointer-events:auto;

	transition:
		opacity .35s ease,
		visibility 0s;
}
.c-modal__backdrop{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.6);
}
.c-modal__panel{
	position:relative;
	z-index:1;
	width:min(90%, 325px);
/* 	max-height:90vh; */
	color:var(--blue);
	overflow:auto;
	background:#fff;
	padding: 40px 20px;
	transform:translateY(10px);
	transition:transform .35s ease;
}
.c-modal.is-open .c-modal__panel{
	transform:translateY(0);
}
.c-modal__close{
	position:absolute;
	top:12px;
	right:12px;

	background:none;
	border:0;
	font-size:var(--fz24);
	line-height: 1;
	color:var(--blue);
	cursor:pointer;
}
.c-modal__image{
	margin-bottom:13px;
}
.c-modal__image-items{
	margin-bottom:15px;
}
.c-modal__image img{
	width:100%;
	height:auto;
	display:block;
	margin:auto;
}
.c-modal__image-package img{
	max-width:115px;
}
.c-modal__image-items img{
	max-width:205px;
}
.c-modal__title{
	margin:0 0 30px;
	text-align:center;
	line-height: 1.2;
}
.c-modal__title .js-modal-name-en{
	font-size:var(--fz20);
}
.c-modal__title .js-modal-name-ja{
	font-size:var(--fz12);
}
.c-modal__title::after{
	content:"";
	display:block;
	width:48px;
	height:1px;
	background-color:var(--blue);
	opacity:0.5;
	margin:1.0em auto 0;
}
.c-modal__name-ja2{
	font-size:var(--fz14);
	text-align:center;
}
.c-modal .c-price{
	display:flex;
	justify-content: center;
	line-height: 1;
}
.c-modal .c-price__currency::before{
	content:"/";
}
.c-modal__price{
	
}




/* Shop & Instagram */
.c-section-band {
	padding: 0 0 8vw;
/* 	margin-top: 20vw; */
}
.c-section-band--blue {
	color:#fff;
	background-color: var(--blue);
	background-image:url(../img/lattice_pattern.webp);
}
.c-section-band .image{
	width:87%;
	position:relative;
	top:-20vw;
}

.c-shop{
	padding-top:160px;
	
/*	padding-top:60px;
 	margin-top: -15vw; */
}
.c-shop__list .c-shop__item{
	border-top:1px solid #fff;
	padding:3rem 2rem;
}
.c-shop__list .c-shop__item:last-child{
	border-bottom:1px solid #fff;
}
.c-shop__list .c-shop__name{
	font-size:var(--fz24);
	flex:4;
}
.c-shop__list .c-shop__detail{
	flex:6;
	position:relative;
}
.c-shop__list .c-shop__detail .c-map-link{
	position:absolute;
	right:15%;
	bottom:0;
}
.c-shop__list .c-shop__detail .c-map-link a{
	color:#fff;
	border-color:rgba(255,2455,255,0.5);
}


.c-instagram{
	padding-top:60px;
	margin-top: 6vw;
}
.c-instagram .c-btn-link__a::after{
	content:"→";
	margin-left:0.35em;
}
.c-instagram__feed{
	margin-bottom:3vw;
}
.c-instagram__feed #instafeed{
	display:flex;
	flex-wrap:wrap;
	gap:2px;
	padding: 2px;
    background: #fff;
}
.c-instagram__feed #instafeed .col{
	width:calc( (100% - 4px) / 3);
}


@media (max-width: 767px) {
	.c-section-band--blue{
		background-size: 150%;
	}
	.c-shop{
		padding-top:23vw;
	}
	.c-shop__list .c-shop__item {
	    padding: 1.5rem 0rem;
	}
	.c-shop__list .c-shop__name{
		font-size: var(--fz21);
		text-align:left;
		margin-bottom: 0.25em;
	}
	.c-shop__list .c-shop__detail{
		margin:0;
	}
	
	.c-instagram__feed #instafeed{
		gap:1px;
		padding: 1px;
	}
	.c-instagram__feed #instafeed .col{
		width:calc( (100% - 2px) / 3);
	}
}


/* Footer */

.c-footer{
	padding: 4vw 5% 1vw;
}
.c-footer .c-footer__logo{
	max-width:190px;
}
.c-footer__copyright{
	font-size:var(--fz9);
	margin-top:5em;
}

.c-footer .c-btn-link{
	position: fixed;
    right: 5%;
    bottom: 30px;
	opacity:0;
	visibility:hidden;
	transform:translateY(10px);
	transition:
		opacity .4s ease,
		transform .4s ease,
		visibility .4s;
}
.c-footer .c-btn-link.is-visible{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
.c-footer .c-btn-link a{
    
}
body.is-toplink-light .c-footer .c-btn-link a{
    color:#fff;
    border-color: rgba(255,255,255,0.5);
}
.c-footer .c-btn-link a::after{
    content:"↑";
    margin-left:0.35em;
}

@media (max-width: 767px) {
	.c-footer {
	    padding: 12vw 5% 5vw;
	}
	.c-footer__copyright {
	    margin-top: 8em;
	}
}