@charset "utf-8";
:root {
    --black: #1a1a1a;
    --light: #f6f6f6;
    --border: #ededed;
    --gray: #dfdfdf;
    --green: #b1ff14;
    --alert: #ff0000;

	--main-width: 1320px;
	--bw: 1600;/* ブラウザ幅の想定値（デザインアートボードの横幅） */
	--px: clamp(0.75px, (100vw / var(--bw)), 1px); /* 許容範囲をclampで表現 */
	/* --px: (100vw / var(--bw)); 教養範囲なしバージョン */

	--m: calc(15 * var(--px));
    --m2: calc( var(--m) * 2 );
    --m3: calc( var(--m) * 3 );
    --m4: calc( var(--m) * 4 );
    --m5: calc( var(--m) * 5 );
    --m6: calc( var(--m) * 6 );
    --m7: calc( var(--m) * 7 );
    --m8: calc( var(--m) * 8 );
    --m9: calc( var(--m) * 9 );
    --m10: calc( var(--m) * 10 );
    --ms: calc( var(--m) / 3 * 2 );

    --header-height: 100px;

    --en-title-size: 24px;
    --label-size: 36px;
    --headline-size: 26px;
    --regular-size: 18px;

    scroll-behavior: smooth;
	scroll-snap-type: y proximity;
	scroll-padding-top: var(--m2, 30px);
    interpolate-size: allow-keywords;

    --transition: 0.3s 0s ease;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    :root {
		--bw: 375;
		--main-width: 100%;
        --header-height: 60px;
        --en-title-size: calc(16 * var(--px));
        --label-size: calc(22 * var(--px));
        --headline-size: calc(18 * var(--px));
        --regular-size: calc(15 * var(--px));
    }
}

:target {
	scroll-margin-block: 2lh;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: var(--regular-size);
    font-weight: 400;
    color: var(--black);
    line-height: 1.75;
    overflow-x: clip;
    background: linear-gradient(to right, white, white 5%, var(--light) 5%, var(--light) 95%, white 95%, white);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/* Reset & Base Styles */
* {
    box-sizing: border-box;
}
/** 疑似要素   
-------------------------------------------------------------------- */
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}
/** 改行   
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	:is(br, wbr)[sp] {
		display: none;
	}
	:is(br, wbr)[pc] {
		display: revert;
	}
}
@media screen and (max-width: 767px) {
	:is(br, wbr)[pc] {
		display: none;
	}
	:is(br, wbr)[sp] {
		display: revert;
	}
}
/** イメージ   
-------------------------------------------------------------------- */
img,
iframe {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: top;
}
img {
	outline: 0;
	-o-object-fit: contain;
	object-fit: contain;
}
picture {
	line-height: 0;
	overflow: hidden;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** リンク   
-------------------------------------------------------------------- */
a {
	color: inherit;
    text-decoration: none;
}
a:has(img) {
	display: block;
}
a:not([class]) {
	color: currentColor;
	text-decoration: underline;
	text-underline-offset: 4px;
}
@media (any-hover: hover) {
	a {
    	transition: var(--transition);
	}
	a:not([class]) {
		text-decoration: underline;
	}
	a:not([class]):hover {
		text-decoration: none;
	}
}


/** アイコン   
-------------------------------------------------------------------- */
svg.icon {
    height: 1lh;
    aspect-ratio: 1 / 1;
    fill: currentColor;
}
/** テキスト   
-------------------------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.5;
    font-weight: 700;
}
.digits {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}
.en-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    text-transform: uppercase;
}
.label {
    font-size: var(--label-size);
}
.marker {
    background: white
}
.highlight-green {
	background: linear-gradient(to top, var(--green) , var(--green) 40%, transparent 40%, transparent);
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}




/** セクション   
-------------------------------------------------------------------- */
main.content {
    position: relative;
    overflow: hidden;
    padding-bottom: var(--m8);
}
main.content section + section {
    margin-top: calc(170 * var(--px));
}
.section-header {
    max-width: 960px;
    margin-inline: auto;
    padding-bottom: var(--m4);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--m4);
}
.section-header .en-title {
    font-size: var(--en-title-size);
    letter-spacing: 0.3em;
    text-align: center;
    color: var(--gray);
}
.section-header .label {
    letter-spacing: 0.12ic;
    text-align: center;
}
.section-header:has(+ p) {
    margin-bottom: var(--m2);
}
.section-header + p {
    text-align: center;
    margin-bottom: var(--m6);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    main.content {
        padding-bottom: 0;
    }
    main.content section + section {
        margin-top: var(--m6);
    }
    .section-header {
        padding-bottom: var(--m2);
        margin-bottom: var(--m2);
    }
    .section-header + p {
        margin-bottom: var(--m2);
    }
}


/** ラッパー   
-------------------------------------------------------------------- */
.wrap {
	width: auto;
	max-width: var(--wrap-width, var(--main-width));
	box-sizing: content-box;
	padding-inline: var(--wrap-padding-inline, 0);
	margin-inline: auto;

	position: relative;
	z-index: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}






/** タイポ   
-------------------------------------------------------------------- */
section:has(.bg-text) {
    position: relative;
    z-index: 2;
}
.bg-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    
    color: white;
    line-height: 0.8;
    white-space: nowrap;

    position: absolute;
    z-index: -1;
}

.bg-text.vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform-origin: center;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** ヘッダー/ハンバーガー   
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	header .burger {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	body.is_show_navigation {
		overflow: clip;
	}
	header .burger {
		width: var(--header-height);
		height: var(--header-height);
		position: relative;
	}
	header nav {
		width: 100svw;

		position: absolute;
		left: 0;
		top: var(--header-height);
		bottom: 0;
		z-index: 10;
		transition: var(--transition);
	}
	body:not(.is_show_navigation) header::after,
	body:not(.is_show_navigation) header nav {
		pointer-events: none;
		opacity: 0;
		z-index: -1;
	}
	body:is(.is_show_navigation) header::after ,
	body:is(.is_show_navigation) header nav {
		pointer-events: all;
		opacity: 1;
	}

	/** ハンバーガー：２本線→バツ */
	header .burger::before,
	header .burger::after {
		display: block;
		width: calc(100% - var(--m2));
		height: 3px;
		border-radius: 3px;
		background: var(--black);

		position: absolute;
		left: 50%;
		top: 50%;
		translate: -50% -50%;

		transition: var(--transition);
	}
	body:not(.is_show_navigation) header .burger::before {
		margin-top: -5px;
	}
	body:not(.is_show_navigation) header .burger::after {
		margin-top: 5px;
	}
	body:is(.is_show_navigation) header .burger::before {
		rotate: 45deg;
	}
	body:is(.is_show_navigation) header .burger::after {
		rotate: -45deg;
	}
}