:root {
    --font-en: "EB Garamond", serif;
	--font-jp: YakuHanMPs, "Noto Serif JP", serif;
	--font-size-xl: min(1.43vw, 20px);
	--font-size-l: min(1.29vw, 18px);
	--font-size-m: min(1vw, 14px);
    --font-size-s: min(0.86vw, 12px);
    --font-size-xs: min(0.71vw, 10px);
	--color-white: #ffffff;
	--color-gray: #dce0e9;
	--color-main: #08225d;
	--color-main-dark: #0e182f;
	--color-main-light: #536181;
	--content-area: 75%;
	--content-area-wide: 92.86%;
	--m05: min(0.36vw, 5px);
	--m10: min(0.71vw, 10px);
	--m20: min(1.43vw, 20px);
	--m30: min(2.14vw, 30px);
	--m40: min(2.86vw, 40px);
	--m50: min(3.57vw, 50px);
	--m60: min(4.29vw, 60px);
	--m70: min(5vw, 70px);
	--m80: min(5.71vw, 80px);
	--m90: min(6.43vw, 90px);
	--m100: min(7.14vw, 100px);
	--round-corner: 100vmax;
	--square-corner: min(5.71vw, 80px);
	--main-duration: 0.6s;
	--main-easing: cubic-bezier(.18,.71,.11,1);
	--main-hover: var(--main-duration) var(--main-easing);
}

*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
	background-color: var(--color-white);
    color: var(--color-main);
    font-family: var(--font-jp);
    font-size: min(1.07vw, 15px);
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.02em;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}
a {
    color: inherit;
    text-decoration: none;
	outline: none;
}
p {
    text-align: justify;
}
img, picture, svg, video, iframe {
    max-width: 100%;
    vertical-align: bottom;
}
svg {
	overflow: visible;
}
ul, ol {
	list-style: none;
}
button, input, select, textarea {
	font: inherit;
}

#hero {
	position: relative;
	height: 100vh;
	background-color: var(--color-main-dark);
	text-align: center;
}
#hero .center {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--m40);
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 100%;
	z-index: 2;
}
#header {
	padding: var(--m20) calc((100vw - var(--content-area)) / 2);
}
#hero .logo {
	opacity: 0;
	filter: blur(20px);
	animation: fadeIn 2.5s var(--main-easing) 1s forwards;
}
.logo svg {
	width: 3.43vw;
	max-width: 48px;
	aspect-ratio: 158 / 205;
	fill: var(--color-white);
}
#hero .logo svg {
	width: 14.29vw;
	max-width: none;
}
.navi > ul > li {
	opacity: 0;
	filter: blur(20px);
	translate: 0 10px;
	animation: fadeIn 1s var(--main-easing) forwards;
	animation-delay: calc(1s + (var(--i) * 0.2s));
}
@keyframes fadeIn {
	0% {
		opacity: 0;
		filter: blur(20px);
		translate: 0 20px;
	}
	100% {
		opacity: 1;
		filter: blur(0);
		translate: 0 0;
	}
}
.navi > .btn {
	display: none;
}
.navi > ul {
	display: flex;
	justify-content: center;
	column-gap: var(--m40);
	font-family: var(--font-en);
	font-size: var(--font-size-m);
	line-height: 1;
}
.navi > ul a {
	position: relative;
	color: var(--color-white);
}
.navi > ul a::before {
	content: "";
	position: absolute;
	bottom: calc(var(--m05) * -1);
	left: 0;
	width: 0;
	height: 1px;
	background-color: var(--color-white);
	transition: width var(--main-hover);
}
@media (min-width: 769px) {
	.navi > ul > li.current a::before {
		width: 100%;
	}
}
@media (hover: hover) {
    .navi > ul a:hover::before {
        width: 100%;
    }
}
.main_img {
	position: relative;
	width: var(--content-area-wide);
	height: 100%;
	margin-inline: auto;
	border-radius: 0 0 100vmax 100vmax;
	overflow: hidden;
	z-index: 1;
}
.main_img img {
	animation: mainImgIn 2.5s var(--main-easing) forwards;
}
@keyframes mainImgIn {
	0% {
		opacity: 0;
		filter: blur(20px);
	}
	100% {
		opacity: 1;
		filter: blur(0);
	}
}
#header.is-fixed {
	position: fixed;
	top: 0;
	left: 50%;
	translate: -50% 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100vw;
	z-index: 9999;
	animation: headerFadeIn 1s var(--main-easing) forwards;
}
#header:not(:has(.navi)) {
	position: absolute;
	justify-content: center;
	animation: none;
}
@keyframes headerFadeIn {
	0% {
		opacity: 0;
		translate: -50% -20px;
	}
	100% {
		opacity: 1;
		translate: -50% 0;
	}
}
#hero #header.is-fixed .logo svg {
	width: 3.43vw;
	max-width: 48px;
}
#hero #header.is-fixed .navi {
	margin-top: 0;
}
#header.is-fixed .logo, #header.is-fixed .navi > ul > li {
	opacity: 1;
	filter: blur(0);
	translate: 0 0;
	animation: none;
}

#concept {
	background-color: var(--color-main-dark);
	padding: min(12.86vw, 180px) 0;
	color: var(--color-white);
}
.column {
	display: flex;
	justify-content: center;
	align-items: center;
}
#concept .column {
	justify-content: space-between;
	max-width: var(--content-area);
	margin-inline: auto;
}
#concept p {
	font-size: var(--font-size-l);
	font-weight: 600;
	line-height: 2;
}
.images {
	position: relative;
	padding-right: min(8.93vw, 125px);
}
.images > figure {
	border-radius: 100vmax;
	overflow: hidden;
}
figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.images_01 {
	width: 29.07vw;
}
.images_02 {
	position: absolute;
	top: calc(min(7.86vw, 110px) * -1);
	right: 0;
	width: 22vw;
	border-radius: 100%;
}

.movie_embed {
	position: relative;
	height: 56.21vw;
}
.movie_embed iframe {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.movie_embed .movie_thumb {
	position: relative;
	cursor: pointer;
}
.movie_embed .movie_thumb img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}
.movie_embed .section_title {
	position: absolute;
	top: 50%;
	left: var(--m30);
	translate: 0 -50%;
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: min(1.14vw, 16px);
	line-height: 1;
	writing-mode: vertical-rl;
}
.movie_play {
	position: absolute;
	bottom: var(--m40);
	right: var(--m40);
	width: min(7.14vw, 100px);
	pointer-events: none;
}
.movie_play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 53%;
	translate: -50% -50%;
	width: 1.89vw;
	max-width: 26.5px;
	height: 2.18vw;
	max-height: 30.5px;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2253px%22%20height%3D%2262px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20d%3D%22M51.432%2C28.407%20L5.543%2C0.562%20C4.117%2C-0.373%200.313%2C-0.373%200.007%2C3.154%20L0.007%2C58.846%20C0.347%2C62.371%204.219%2C62.431%205.543%2C61.436%20L51.432%2C33.591%20C52.621%2C32.958%2054.251%2C30.366%2051.432%2C28.407%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
}
.movie_play > img {
	animation: rotate 16s infinite linear;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
#movie .inner p {
	line-height: 2;
}

.inner {
	width: var(--content-area);
	margin-inline: auto;
	padding: var(--m90) 0 var(--m100);
}
.inner + .inner {
	padding-top: 0;
}
.inner .column {
	justify-content: space-between;
	align-items: flex-start;
}
.inner .detail {
	width: 57.14%;
}
.inner .detail p {
	line-height: 2;
}
.inner_title {
	font-family: var(--font-en);
	font-size: min(1.57vw, 22px);
}
.inner .link {
	margin-top: var(--m50);
	text-align: right;
}
#article .inner .item .detail .link {
	margin-top: var(--m20);
}
.link > a {
	position: relative;
	padding-right: min(1.79vw, 25px);
}
.link > a::before, .link > a::after {
	content: "";
	position: absolute;
	bottom: calc(min(0.86vw, 12px) * -1);
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-gray);
}
.link > a::before {
	width: 0;
	background-color: var(--color-main);
	z-index: 1;
	transition: width var(--main-hover);
}
@media (hover: hover) {
    .link > a:hover::before {
        width: 100%;
    }
}
a > .arrow {
	position: absolute;
	top: 55%;
	right: 0;
	translate: 0 -50%;
	width: 1.07vw;
	max-width: 15px;
	height: 1.07vw;
	max-height: 15px;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22arrow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%2019%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%2308225d%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9.5%2C0C4.2%2C0%2C0%2C4.2%2C0%2C9.5s4.2%2C9.5%2C9.5%2C9.5%2C9.5-4.2%2C9.5-9.5S14.8%2C0%2C9.5%2C0ZM5.4%2C14.2l3.6-4.2-3.6-5.2%2C9.2%2C5.2s-9.2%2C4.2-9.2%2C4.2Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
}

#product {
	background-color: var(--color-main-dark);
	padding: var(--m100) 0;
	color: var(--color-white);
}
#product > div + div {
	margin-top: var(--m100);
}
#product > .item:nth-child(even) .column {
	flex-direction: row-reverse;
}
#product > .item .detail {
	width: 34%;
}
#product > .item .detail .wrap {
	width: 60.53%;
	margin-inline: auto;
}
#product .detail .item_opus {
	margin-bottom: var(--m05);
	color: var(--color-main-light);
	font-family: var(--font-en);
}
#product .item_title {
	font-size: min(3.07vw, 43px);
	font-weight: 600;
}
#product .item_title_en {
	font-family: var(--font-en);
}
#product .detail .wrap > hgroup + p {
	margin-top: var(--m50);
}
#product .detail .wrap > p {
	line-height: 1.8;
}
#product .detail .wrap .link {
	margin-top: var(--m50);
}
#product .detail .wrap .link > a::after {
	background-color: var(--color-main-light);
}
#product .detail .wrap .link > a::before {
	background-color: var(--color-white);
}
#product a > .arrow {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22arrow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%2019%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9.5%2C0C4.2%2C0%2C0%2C4.2%2C0%2C9.5s4.2%2C9.5%2C9.5%2C9.5%2C9.5-4.2%2C9.5-9.5S14.8%2C0%2C9.5%2C0ZM5.4%2C14.2l3.6-4.2-3.6-5.2%2C9.2%2C5.2s-9.2%2C4.2-9.2%2C4.2Z%22%2F%3E%3C%2Fsvg%3E');
}
#product > .item .column > figure {
	width: 66%;
	border-radius: 100vmax 0 0 100vmax;
	overflow: hidden;
}
#product > .item:nth-child(even) .detail + figure {
	border-radius: 0 100vmax 100vmax 0;
}
#product > .sub_item {
	width: var(--content-area);
	margin-inline: auto;
}
#product > .sub_item .item_title {
	margin-bottom: var(--m80);
	text-align: center;
}
#product > .sub_item .item_title > small {
	font-size: min(1.86vw, 26px);
	line-height: 2;
}
#product > .sub_item .column {
	justify-content: space-between;
}
#product > .sub_item .column > .detail {
	width: 42%;
}
#product > .sub_item .column > figure {
	width: 52%;
	border-radius: var(--round-corner);
	overflow: hidden;
}
#product .inner {
	margin-top: var(--m80);
	padding: 0;
}
.credit {
	margin-top: var(--m10);
	font-size: var(--font-size-s);
	text-align: right;
}
.credit a {
	border-bottom: 1px solid var(--color-main-light);
}
@media (hover: hover) {
    .credit a:hover {
		border-bottom: none;
    }
}

#gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
#gallery figure:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
#gallery figure:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
#gallery figure:nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

#footer {
	padding: var(--m90);
}
#footer .logo {
	text-align: center;
}
#footer .logo svg {
	width: 5.64vw;
	max-width: 80px;
	fill: var(--color-main);
}
#footer .copyright {
	margin-top: var(--m30);
	font-family: var(--font-en);
	font-size: var(--font-size-xs);
	text-align: center;
}


#visual {
	background-color: var(--color-main-dark);
	padding: min(7.96vw, 111.5px) 0 var(--m90);
}
#visual .inner {
	position: relative;
	width: var(--content-area-wide);
	padding: 0;
}
#visual figure {
	width: 100%;
	border-radius: var(--round-corner);
	overflow: hidden;
}
#visual .lead {
	position: absolute;
	bottom: calc(var(--m50) * -1);
	right: var(--m20);
	color: var(--color-white);
	font-size: min(3.71vw, 52px);
	font-weight: 700;
	line-height: 1.4;
}
#visual .lead > small {
	font-size: min(1.57vw, 22px);
	font-weight: 600;
}
.page_title {
	position: absolute;
	bottom: calc(var(--m40) * -1);
	right: var(--m20);
	color: var(--color-white);
	font-size: min(3.71vw, 52px);
	font-weight: 600;
}

.sub #concept {
	padding: 0;
}
.sub #concept > .column {
	justify-content: center;
	align-items: flex-start;
	column-gap: min(10vw, 140px);
}
.concept_title {
	font-size: min(7.14vw, 100px);
	font-weight: 400;
	line-height: 1;
}
.concept_title_en {
	display: block;
	margin-top: min(1.07vw, 15px);
	font-family: var(--font-en);
	font-size: min(2.36vw, 33px);
}

#partner {
	background-color: var(--color-main-dark);
	padding-top: var(--m100);
	color: var(--color-white);
}
#partner .column {
	align-items: center;
	column-gap: min(8.57vw, 120px);
}
#partner .column:nth-child(even) {
	flex-direction: row-reverse;
}
#partner .column + .column {
	margin-top: min(10vw, 140px);
}
#partner .column:not(:has(.profile_pic)) .detail {
	width: auto;
}
#partner .detail hgroup {
	margin-bottom: var(--m40);
}
#partner .detail .item_title {
	font-size: min(2.14vw, 30px);
	font-weight: 600;
}
#partner .detail .item_title > small {
	font-size: min(1.57vw, 22px);
}
#partner .detail .item_title_en {
	font-family: var(--font-en);
	font-size: var(--font-size-l);
}
#partner .inner .detail p {
	font-size: var(--font-size-m);
}
#partner .inner .detail p + p {
	margin-top: var(--m20);
}
#partner .inner .link {
	display: flex;
	column-gap: var(--m40);
	text-align: left;
}
#partner .inner .link > a {
	width: 30%;
}
#partner .inner .link > a::after {
	background-color: var(--color-main-light);
}
#partner .inner .link > a::before {
	background-color: var(--color-white);
}
#partner a > .arrow {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22arrow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%2019%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9.5%2C0C4.2%2C0%2C0%2C4.2%2C0%2C9.5s4.2%2C9.5%2C9.5%2C9.5%2C9.5-4.2%2C9.5-9.5S14.8%2C0%2C9.5%2C0ZM5.4%2C14.2l3.6-4.2-3.6-5.2%2C9.2%2C5.2s-9.2%2C4.2-9.2%2C4.2Z%22%2F%3E%3C%2Fsvg%3E');
}
#partner .images {
	padding-right: var(--m100);
}
#partner .column:nth-child(even) .images {
	padding-left: var(--m100);
	padding-right: 0;
}
#partner .images_02 {
	width: 19.79vw;
}
#partner .column:nth-child(even) .images_02 {
	left: 0;
	right: auto;
}
#partner .column:has(.profile_pic) {
	column-gap: var(--m80);
}
#partner .column:has(.profile_pic) + .column {
	margin-top: var(--m100);
}
.profile_pic {
	width: 30%;
}
.profile_pic > figure {
	border-radius: var(--round-corner);
	overflow: hidden;
}
#partner .inner .detail .notes {
	margin-top: var(--m10);
	font-size: var(--font-size-s);
	text-align: left;
}

#article {
	background-color: var(--color-main-dark);
	color: var(--color-white);
	padding-bottom: var(--m50);
}
#article .item + .item {
	margin-top: var(--m100);
}
#article .detail {
	width: 100%;
}
#article .detail + .detail {
	margin-top: var(--m50);
}
#article .item:has(> figure) {
	display: flex;
	justify-content: space-between;
}
#article .item:has(> figure) .detail {
	width: 64%;
}
.article_title {
	margin-bottom: var(--m30);
	font-size: min(2vw, 28px);
	font-weight: 600;
}
#article p {
	line-height: 2;
}
#article .item p + p {
	margin-top: var(--m30);
}
#article .item > figure {
	width: 30%;
	border-radius: var(--round-corner);
	overflow: hidden;
}
.profile > .column {
	align-items: center;
	column-gap: var(--m50);
	border: 0.5px solid var(--color-main-light);
	border-radius: var(--square-corner);
	margin-top: var(--m50);
	padding: var(--m40) var(--m60);
}
.profile > .column + .column {
	flex-direction: row;
	margin-top: var(--m30);
}
.profile .detail .link {
	margin: var(--m30) 0;
}
.profile .detail .link > a::after, #article .detail .link > a::after {
	background-color: var(--color-main-light);
}
.profile .detail .link > a::before, #article .detail .link > a::before {
	background-color: var(--color-white);
}
.profile a > .arrow, #article a > .arrow {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22arrow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%2019%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9.5%2C0C4.2%2C0%2C0%2C4.2%2C0%2C9.5s4.2%2C9.5%2C9.5%2C9.5%2C9.5-4.2%2C9.5-9.5S14.8%2C0%2C9.5%2C0ZM5.4%2C14.2l3.6-4.2-3.6-5.2%2C9.2%2C5.2s-9.2%2C4.2-9.2%2C4.2Z%22%2F%3E%3C%2Fsvg%3E');
}
.profile > .column .detail {
	width: 100%;
}
.profile .item_title {
	margin-bottom: var(--m20);
	font-size: var(--font-size-xl);
	font-weight: 600;
}
.profile > .column .detail p {
	font-size: var(--font-size-m);
	line-height: 1.8;
}
#article .detail > .images {
	display: flex;
	justify-content: space-between;
	column-gap: var(--m30);
	margin-top: var(--m50);
	padding-right: 0;
}
#article .detail > .images > figure {
	border-radius: var(--round-corner);
}

#article + #lineup {
	margin-top: var(--m50);
}
.grid + .grid {
	margin-top: min(10vw, 140px);
}
.grid_title {
	position: relative;
	margin-bottom: var(--m70);
	border-top: 1px solid #ddd;
	padding-top: var(--m20);
	font-size: min(2.86vw, 40px);
	font-weight: 600;
}
.grid_title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 30%;
	height: 1px;
	background-color: var(--color-main);
}
.grid_title > small {
	margin-left: var(--m10);
	font-family: var(--font-en);
	font-size: min(1.71vw, 24px);
}
.grid .item_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--m100) var(--m80);
}
.item_list figure {
	border-radius: var(--square-corner);
	overflow: hidden;
}
.item_list figure img {
	transition: scale var(--main-hover);
}
@media (hover: hover) {
    .item_list figure a:hover img {
		scale: 1.05;
    }
}
.item_list .detail {
	width: 80%;
	margin-top: var(--m30);
	margin-inline: auto;
}
.product_title {
	font-size: var(--font-size-l);
	font-weight: 600;
}
.inner .detail .product_price {
	margin-top: var(--m05);
	font-size: var(--font-size-l);
	font-weight: 600;
	line-height: 1.1;
}
.product_price > span {
	font-family: var(--font-en);
	font-size: min(2.71vw, 38px);
}
.product_price > sup {
	margin-left: var(--m05);
	font-size: var(--font-size-l);
}
.item_list .btn {
	margin-top: var(--m30);
}
.item_list .btn > a {
	background-color: var(--color-main);
	border-radius: 100vmax;
	color: var(--color-white);
	font-size: var(--font-size-l);
	line-height: 1;
}
.item_list .btn > a > .arrow {
	top: 50%;
	right: var(--m20);
	width: 1.29vw;
	max-width: 18px;
	height: 1.29vw;
	max-height: 18px;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22arrow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%2019%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9.5%2C0C4.2%2C0%2C0%2C4.2%2C0%2C9.5s4.2%2C9.5%2C9.5%2C9.5%2C9.5-4.2%2C9.5-9.5S14.8%2C0%2C9.5%2C0ZM5.4%2C14.2l3.6-4.2-3.6-5.2%2C9.2%2C5.2s-9.2%2C4.2-9.2%2C4.2Z%22%2F%3E%3C%2Fsvg%3E');
}
.notes {
	margin-top: var(--m40);
	font-size: var(--font-size-s);
	text-align: right;
}
.grid > .btn {
	margin-top: var(--m60);
}
.grid > .btn > a {
	font-size: var(--font-size-l);
}
.grid .btn br {
	display: none;
}

.sub .head {
	display: flex;
	align-items: center;
	column-gap: var(--m20);
	margin-bottom: var(--m100);
}
.sub .section_title {
	font-size: min(2.71vw, 38px);
	font-weight: 600;
}
.sub .section_title_en {
	display: flex;
	align-items: center;
	column-gap: var(--m20);
	font-family: var(--font-en);
	font-size: min(1.57vw, 22px);
	font-weight: 500;
}
.sub .section_title_en::before {
	content: "";
	display: block;
	width: min(7.14vw, 100px);
	height: 1px;
	background-color: var(--color-main);
}

#features {
	background-color: var(--color-main-dark);
	color: var(--color-white);
	padding-bottom: var(--m50);
}
#features .section_title_en::before {
	background-color: var(--color-white);
}

.column_list .column {
	align-items: center;
}
.column_list .column:nth-child(even) {
	flex-direction: row-reverse;
}
.column_list .column + .column {
	margin-top: var(--m80);
}
.column_list .column > .detail {
	width: 45%;
}
.column_list .column > .detail .item_title {
	margin-bottom: var(--m30);
	font-size: min(2vw, 28px);
	font-weight: 700;
}
.column_list .column > .detail p {
	font-size: var(--font-size-m);
}
.column_list .column > figure {
	width: 48%;
	border-radius: var(--square-corner);
	overflow: hidden;
}

#manufacturer {
	background-color: #f7f7fc;
}
#manufacturer .column_list .column {
	align-items: flex-start;
}
.column_list .column > .detail .detail_wrap + .detail_wrap {
	margin-top: var(--m60);
}

.column .btn {
	width: 46%;
}
.btn > a {
	position: relative;
	display: block;
	border: 1px solid var(--color-main);
	border-radius: var(--m10);
	padding: var(--m20);
	font-weight: 600;
	text-align: center;
	transition: background-color var(--main-hover), translate var(--main-hover);
}
.btn > a > .arrow {
	top: 50%;
	right: var(--m20);
	transition: scale var(--main-hover);
}
@media (hover: hover) {
    .btn > a:hover {
		translate: 0 -2px;
    }
	.btn > a:hover > .arrow {
		scale: 1.2;
	}
}

.cover {
	margin: var(--m50) 0 0;
}
.cover > img {
	width: 100%;
	height: 42.86vw;
	object-fit: cover;
	object-position: bottom center;
}
.detail_list {
	margin: var(--m20) 0;
}
.detail_list > li {
	display: flex;
	line-height: 1.8;
	text-align: justify;
}
.detail_list > li + li {
	margin-top: min(0.21vw, 3px);
}
.detail_list > li::before {
	content: "※";
	margin-right: var(--m10);
}

#about {
	background-color: var(--color-main-dark);
	color: var(--color-white);
}
#about p {
	line-height: 2;
}
#about .item > p {
	font-size: var(--font-size-l);
	font-weight: 600;
}
#about .item + .item {
	margin-top: min(10vw, 140px);
}
#about .item:nth-child(odd) > .column {
	flex-direction: row-reverse;
}
#about .detail {
	width: 45%;
}
#about .article_title {
	margin-bottom: var(--m60);
}
#about .detail p + p {
	margin-top: var(--m30);
}
#about .gallery {
	display: grid;
	grid-template-columns: 40% 1fr; 
	grid-template-rows: 1fr 1fr;
	grid-template-areas: 
		"main side-top"
		"main side-bottom";
	gap: var(--m30) var(--m50);
	margin-top: var(--m80);
}
#about .gallery > figure:first-child {
	grid-area: main;
	width: 100%;
}
#about .gallery > figure:nth-child(2) {
	grid-area: side-top;
	margin-left: auto;
}
#about .gallery > figure:nth-child(3) {
	grid-area: side-bottom;
}
#about .gallery > figure {
	width: 64%;
}
#about figure {
	width: 48%;
	border-radius: var(--square-corner);
	overflow: hidden;
}
#about .profile {
	margin-top: var(--m80);
}
#about .profile_pic > figure {
	width: 100%;
}
#about .profile > .column .detail {
	width: 100%;
}

#information {
	background-color: var(--color-main-dark);
	color: var(--color-white);
	padding: var(--m100) 0;
}
#information .inner + .inner {
	border-top: 0.5px solid #2e3545;
	padding-top: var(--m80);
}
#information .link > a::after {
	background-color: var(--color-main-light);
}
#information .link > a::before {
	background-color: var(--color-white);
}
#information a > .arrow {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22arrow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%2019%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9.5%2C0C4.2%2C0%2C0%2C4.2%2C0%2C9.5s4.2%2C9.5%2C9.5%2C9.5%2C9.5-4.2%2C9.5-9.5S14.8%2C0%2C9.5%2C0ZM5.4%2C14.2l3.6-4.2-3.6-5.2%2C9.2%2C5.2s-9.2%2C4.2-9.2%2C4.2Z%22%2F%3E%3C%2Fsvg%3E');
}
#information .detail p a {
	border-bottom: 1px solid var(--color-main-light);
}
@media (hover: hover) {
    #information .detail p a:hover {
		border-bottom: none;
	}
}

@media (max-width: 768px) {
	:root {
		--font-size-l: 3.8vw;
		--font-size-m: 3vw;
		--font-size-s: 2.5vw;
		--font-size-xs: 2vw;
		--content-area: 82vw;
		--m05: 4vw;
		--m10: 5vw;
		--m20: 6vw;
		--m30: 7vw;
		--m40: 8vw;
		--m50: 9vw;
		--m60: 10vw;
		--m70: 11vw;
		--m80: 12vw;
		--m90: 13vw;
		--m100: 14vw;
		--round-corner: var(--square-corner);
	}

	body {
		font-size: 3.2vw;
	}
	#header {
		padding-top: 2.5vw;
		padding-bottom: 2.5vw;
	}
	#hero {
		height: 72vh;
	}
	#hero .center {
		row-gap: var(--m20);
	}
	.logo svg {
		position: relative;
		width: 8vw;
		z-index: 2;
	}
	#hero .logo svg {
		width: 28vw;
	}
	#hero #header.is-fixed .logo svg {
		width: 8vw;
	}
	.navi > ul {
		column-gap: 4vw;
		font-size: 2.4vw;
	}
	.navi > ul > li:last-child {
		display: none;
	}
	#header.is-fixed .navi > .btn {
		position: relative;
		display: flex;
		flex-direction: column;
		row-gap: 1vw;
		width: 8vw;
		cursor: pointer;
	}
	#header.is-fixed .navi > .btn::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		width: 7vw;
		height: 7vw;
		z-index: 10;
	}
	.navi > .btn > span {
		position: relative;
		width: 100%;
		height: 1px;
		background-color: var(--color-white);
		transition: rotate var(--main-hover);
		z-index: 2;
	}
	#header.is-fixed .navi > .btn.is-active > span:nth-child(1) {
		rotate: 35deg;
		translate: 0 0.65vw;
	}
	#header.is-fixed .navi > .btn.is-active > span:nth-child(2) {
		rotate: -35deg;
		translate: 0 -0.65vw;
	}
	#header.is-fixed .navi > .btn.is-active > span:nth-child(3) {
		opacity: 0;
	}
	#header.is-fixed .navi > ul {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		background-color: var(--color-main-dark);
		padding: 20vw calc((100vw - var(--content-area)) / 2);
		font-size: 4vw;
		text-align: left;
		z-index: 1;
	}
	#header.is-fixed .navi > ul > li {
		border-bottom: 0.5px solid var(--color-main-light);
		padding-bottom: 3.5vw;
	}
	#header.is-fixed .navi > ul > li + li {
		margin-top: var(--m10);
	}
	#header.is-fixed .navi > ul > li > a {
		display: block;
	}
	#header.is-fixed .navi > ul > li:last-child {
		display: inherit;
	}
	#header.is-fixed .navi > ul > li > a::after {
		content: "";
		position: absolute;
		top: 55%;
		right: 0;
		translate: 0 -50%;
		width: 3.5vw;
		height: 3.5vw;
		background: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22arrow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%2019%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9.5%2C0C4.2%2C0%2C0%2C4.2%2C0%2C9.5s4.2%2C9.5%2C9.5%2C9.5%2C9.5-4.2%2C9.5-9.5S14.8%2C0%2C9.5%2C0ZM5.4%2C14.2l3.6-4.2-3.6-5.2%2C9.2%2C5.2s-9.2%2C4.2-9.2%2C4.2Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
	}
	#header.is-fixed .navi > .btn::before {
		opacity: 0;
	}
	#header.is-fixed .navi > .btn.is-active::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: var(--color-white);
		opacity: 0.7;
		z-index: -1;
		transition: opacity 1s var(--main-easing);
	}
	#concept {
		padding: 16vw 0 20vw;
	}
	.column {
		flex-direction: column;
	}
	#concept .column {
		row-gap: 16vw;
	}
	.images {
		padding-right: 0;
	}
	.images_01 {
		width: 74vw;
	}
	.images_02 {
		top: -10vw;
		right: -8vw;
		width: 42vw;
	}
	.movie_embed .section_title {
		left: var(--m05);
		font-size: 2.5vw;
	}
	.movie_play {
		bottom: 4.5vw;
		right: 4.5vw;
		width: 16vw;
	}
	.movie_play::before {
		width: 4.27vw;
		height: 4.93vw;
	}
	.inner_title {
		font-size: 4.8vw;
		margin-bottom: var(--m20);
	}
	.inner .detail {
		width: 100%;
	}
	.link > a {
		padding-right: 5vw;
	}
	.link > a::before, .link > a::after {
		bottom: -3vw;
	}
	a > .arrow {
		width: 3.5vw;
		height: 3.5vw;
	}
	#product > div + div {
		margin-top: 20vw;
	}
	#product .column {
		row-gap: var(--m50);
	}
	#product .column, #product > .item:nth-child(even) .column {
		flex-direction: column-reverse;
	}
	#product > .item .detail {
		width: var(--content-area);
	}
	#product > .item .detail .wrap {
		width: 100%;
	}
	#product > .item .detail + figure {
		width: calc(100vw - ((100vw - var(--content-area)) / 2));
		margin-left: auto;
	}
	#product > .item:nth-child(even) .detail + figure {
		margin-left: 0;
		margin-right: auto;
	}
	#product .detail .item_opus {
		margin-bottom: 2vw;
	}
	#product .item_title {
		font-size: 8vw;
	}
	#product .item_title_en {
		margin-top: 1vw;
	}
	#product > .sub_item .item_title {
		margin-bottom: var(--m40);
		font-size: 6vw;
	}
	#product > .sub_item .item_title > small {
		font-size: 3.5vw;
	}
	#product > .sub_item .column > .detail {
		width: 100%;
	}
	#product > .sub_item .column > figure {
		width: 100%;
	}
	.credit {
		margin-top: 2vw;
	}
	#footer .logo svg {
		width: 12vw;
	}
	#footer .copyright {
		margin-top: var(--m10);
	}

	
	#visual {
		padding: 16vw 0 var(--m10);
	}
	#visual .lead {
		position: static;
		margin-top: 2vw;
		font-size: 6.2vw;
		line-height: 1.5;
		text-align: center;
	}
	#visual .lead > small {
		font-size: 3.8vw;
	}
	.page_title {
		bottom: calc(var(--m10) * -1);
		right: var(--m10);
		font-size: 7.5vw;
	}

	.sub #concept {
		padding-top: var(--m10);
	}
	.sub #concept > .column {
		row-gap: var(--m50);
	}
	.concept_title {
		font-size: 10vw;
	}
	.concept_title_en {
		margin-top: 2.5vw;
		font-size: 4.5vw;
	}

	#partner {
		padding-top: 0;
	}
	#partner .column {
		row-gap: 20vw;
	}
	#partner .column:nth-child(even) {
		flex-direction: column;
	}
	#partner .column + .column {
		margin-top: 16vw;
	}
	#partner .column:has(.profile_pic) {
		row-gap: var(--m50);
	}
	#partner .column:has(.profile_pic) + .column {
		margin-top: 16vw;
	}
	#partner .detail hgroup {
		margin-bottom: var(--m20);
	}
	#partner .detail .item_title {
		font-size: 6vw;
	}
	#partner .detail .item_title > small {
		font-size: 3.5vw;
	}
	#partner .images {
		padding-right: 0;
	}
	#partner .column:nth-child(even) .images {
		padding-left: 0;
	}
	#partner .images_02 {
		width: 38vw;
	}
	.profile_pic {
		width: 100%;
	}
	#partner .inner .detail .notes {
		margin-top: 1vw;
	}

	#article .item:has(> figure) {
		flex-direction: column;
		row-gap: var(--m40);
	}
	#article .item + .item {
		margin-top: 16vw;
	}
	#article .item:has(> figure) .detail {
		width: 100%;
	}
	.article_title {
		font-size: 4.5vw;
		line-height: 1.6;
		margin-bottom: var(--m20);
	}
	#article .item > figure {
		width: 100%;
	}
	.profile > .column {
		row-gap: var(--m20);
		margin-top: var(--m40);
		padding: var(--m30) var(--m40);
	}
	.profile > .column + .column {
		flex-direction: column;
	}
	.profile .item_title {
		margin-bottom: 2vw;
		font-size: 4vw;
	}
	#article .detail > .images {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--m20) var(--m10);
		margin-top: var(--m30);
	}
	#article .detail > .images > figure:first-child {
		grid-column: 1 / 3;
	}
	#article .detail > .images > figure {
		margin: 0;
	}

	.sub .head {
		column-gap: 3vw;
		margin-bottom: var(--m60);
	}
	.sub .section_title {
		font-size: 6vw;
	}
	.sub .section_title_en {
		column-gap: 3vw;
		font-size: 4vw;
	}
	.sub .section_title_en::before {
		width: 14vw;
	}
	.grid + .grid {
		margin-top: 20vw;
	}
	.grid_title {
		padding-top: 3vw;
		font-size: 7.5vw;
	}
	.grid_title > small {
		margin-left: 2vw;
		font-size: 4vw;
	}
	.grid_title::before {
		width: 30vw;
	}
	.grid .item_list {
		grid-template-columns: repeat(1, 1fr);
		row-gap: 14vw;
	}
	.inner .detail .product_price {
		margin-top: 2vw;
	}
	.product_price > span {
		font-size: 8vw;
	}
	.product_price > sup {
		margin-left: 2vw;
	}
	.btn > a {
		padding: var(--m10) 0;
	}
	.item_list .btn {
		margin-top: var(--m10);
	}
	.item_list .btn > a > .arrow {
		width: 4vw;
		height: 4vw;
	}
	.grid .btn br {
		display: block;
	}

	.column_list .column {
		row-gap: var(--m40);
	}
	.column_list .column:nth-child(even) {
		flex-direction: column;
	}
	.column_list .column > figure {
		width: 100%;
	}
	.column_list .column > .detail {
		width: 100%;
	}
	.column_list .column > .detail .item_title {
		margin-bottom: var(--m10);
		font-size: 4.5vw;
	}

	.detail_list {
		margin: var(--m05) 0;
	}
	.detail_list > li::before {
		margin-right: 1.5vw;
	}

	#about .gallery {
		grid-template-columns: 48% 1fr;
		gap: 3vw 4.5vw;
		margin-top: var(--m50);
	}
	#about .gallery > figure {
		width: 100%;
	}
	#about .item + .item {
		margin-top: 16vw;
	}
	#about .item > .column {
		row-gap: var(--m40);
	}
	#about .item:nth-child(odd) > .column {
		flex-direction: column;
	}
	#about figure {
		width: 100%;
	}
	#about .detail {
		width: 100%;
	}

	#information {
		padding: var(--m60) 0;
	}
}