@charset "utf-8";



:root {

	--pcv: / 1440 * 100vw;

	--pcp: / 1440 * 100%;

	

	--spv: / 375 * 100vw;

	--spp: / 375 * 100%;

}



#content {

	box-sizing: border-box;

	font-family: "aktiv-grotesk-extended", sans-serif;

	font-weight: 400;

	overflow: visible;

}



#content * {

	margin: 0;

	padding: 0;

	line-height: 1;

}

#content h1,

#content h2,

#content h3,

#content p,

#content li,

#content dt,

#content dd {

	font-weight: 400;

}



#content img {

	max-width: 100%;

}



#content ul,

#content ol {

	outline-style: none;

}



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

	.pc-none {

		display: none !important;

	}

}



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

	.sp-none {

		display: none !important;

	}

}



/* -------------------------------------------------

	#fv

------------------------------------------------- */



#fv {

	position: relative;

}

#fv .pic {

	width: 100%;

}

#fv h1 {

	width: calc(358 var(--pcp));

	position: absolute;

	left: 50%;

	top: calc(305 var(--pcv));

	transform: translateX(-50%);

	z-index: 4;

}

#fv h1 .logo1 {

	width: calc(317 / 358 * 100%);

	opacity: 0;

	transform: translateY(10%);

	transition:

		opacity 0.6s cubic-bezier(.12,.92,.31,.95) 0.2s,

		transform 0.6s cubic-bezier(.12,.92,.31,.95) 0.2s;

}

#fv h1 .logo2 {

	width: calc(180 / 358 * 100%);

	margin-left: calc(178 / 358 * 100%);

	opacity: 0;

	transform: translateY(10%);

	transition:

		opacity 0.6s cubic-bezier(.12,.92,.31,.95) 0.6s,

		transform 0.6s cubic-bezier(.12,.92,.31,.95) 0.6s;

}

#fv .logo3 {

	width: calc(645 var(--pcp));

	position: absolute;

	left: 50%;

	top: calc(586 var(--pcv));

	transform: translateX(-50%);

	z-index: 4;

	opacity: 0;

	transition: opacity 1s ease-out 1.2s;

}



#fv.on h1 .logo1,

#fv.on h1 .logo2 {

	opacity: 1;

	transform: translateY(0);

}

#fv.on .logo3 {

	opacity: 1;

}



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

	#fv h1 {

		width: calc(268 var(--spp));

		left: calc(75 var(--spp));

		top: calc(144 var(--spv));

		transform: translateX(0);

	}

	#fv h1 .logo1 {

		width: calc(237 / 268 * 100%);

	}

	#fv h1 .logo2 {

		width: calc(135 / 268 * 100%);

		margin-left: calc(133 / 268 * 100%);

	}

	#fv .logo3 {

		width: calc(79 var(--spp));

		top: calc(269 var(--spv));

	}

}



/* -------------------------------------------------

	#lead

------------------------------------------------- */



#lead {

	padding: 90px 0;

	text-align: center;

	background: #fff;

}

#lead .copy {

	font-size: 20px;

	line-height: calc(28 / 20);

	font-family: "dnp-shuei-gothic-gin-std";

	font-weight: 500;

}

#lead .desc {

	margin-top: 35px;

}

#lead .desc p {

	font-size: 14px;

	line-height: calc(28 / 14);

	font-family: "dnp-shuei-gothic-gin-std";

	font-weight: 500;

}

#lead .desc p + p {

	margin-top: 1.5em;

}



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

	#lead {

		padding: calc(53 var(--spv)) 0;

	}

	#lead .copy {

		font-size: calc(20 var(--spv));

	}

	#lead .desc {

		margin-top: 35px;

	}

	#lead .desc p {

		font-size: calc(14 var(--spv));

	}

}



/* -------------------------------------------------

	#label-nav

------------------------------------------------- */



#label-nav {

	position: sticky;

	top: 0;

	z-index: 50;

	opacity: 0;

	transform: translateY(-30px);

	transition:

		opacity 0.6s cubic-bezier(.19,.58,.4,.85),

		transform 0.6s cubic-bezier(.19,.58,.4,.85);

}

#label-nav.on {

	opacity: 1;

	transform: translateY(0);

}



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

	#label-nav {

		width: calc(260 var(--pcp));

		padding-left: calc(42 var(--pcv));

	}

	#label-nav .logo {

		width: 167px;

		padding-top: 40px;

	}

	#label-nav ul {

		margin-top: 16px;

		display: block !important;

	}

	#label-nav ul li {

		font-size: 11px;

	}

	#label-nav ul li + li {

		margin-top: 1em;

	}

	#label-nav ul li a {

		color: #000;

		text-decoration: underline;

	}

	#label-nav ul li a:hover {

		opacity: 0.5;

	}

}



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

	#label-nav .logo {

		width: calc(42 var(--spv));

		position: absolute;

		right: calc(20 var(--spv));

		top: calc(30 var(--spv));

		mix-blend-mode: difference;

	}

	#label-nav ul {

		width: 100%;

		padding: calc(40 var(--spv)) calc(0 var(--spv)) calc(30 var(--spv)) calc(25 var(--spv));

		position: fixed;

		left: 0;

		top: 0;

		z-index: 100;

		background: #fff;

		display: none;

	}

	#label-nav ul li {

		font-size: calc(13 var(--spv));

	}

	#label-nav ul li + li {

		margin-top: 1em;

	}

	#label-nav ul li a {

		text-decoration: underline;

	}

	

	#label-nav #menu-btn {

		width: calc(27 var(--spv));

		position: absolute;

		left: calc(18 var(--spv));

		top: calc(34 var(--spv));

		cursor: pointer;

		background: transparent;

		border: none;

	}

	#label-nav #menu-btn img {

		width: 100%;

	}

	#label-nav #menu-close {

		width: calc(19 var(--spv));

		position: fixed;

		right: calc(10 var(--spv));

		top: calc(27 var(--spv));

		cursor: pointer;

		z-index: 110;

		border: none;

		background: transparent;

		display: none;

	}

}



/* -------------------------------------------------

	#labels

------------------------------------------------- */



#labels .pic,

#labels .pics .pic {

	width: 100%;

}

#labels .label .head {

	position: relative;

}

#labels .label#kbf .head {

	background: #fff;

}



#labels .label .head .logo { /* ヘッドアニメーション */

	position: absolute;

	opacity: 0;

	transform: translateY(10px);

	transition:

		opacity 0.8s cubic-bezier(.12,.92,.31,.95),

		transform 0.8s cubic-bezier(.12,.92,.31,.95);

}

#labels .label .head .logo.l2 { /* ヘッドアニメーション */

	transition-delay: 0.3s;

}

#labels .label .head .logo.l3 { /* ヘッドアニメーション */

	transition-delay: 0.6s;

}

#labels .label .head.on .logo { /* ヘッドアニメーション */

	opacity: 1;

	transform: translateY(0);

}



#labels .label .body {

	padding: 30px 0 120px;

}

#labels .label#ur-m .body { background: #E2E2E5; }

#labels .label#ur-w .body { background: #E2E2E5; }

#labels .label#doors-m .body { background: #EBE8DC; }

#labels .label#doors-w .body { background: #EBE8DC; }

#labels .label#rosso .body { background: #DD9895; }

#labels .label#kbf .body { background: #fff; }

#labels .label#sense .body { background: #ECF5F5; }

#labels .label#sonny .body { background: #F0EACB; }



#labels .label .body .pic,

#labels .label .body .logo { /* ボディーアニメーション */

	opacity: 0;

	transition:

		opacity 0.8s cubic-bezier(.12,.92,.31,.95),

		transform 0.8s cubic-bezier(.12,.92,.31,.95);

}

#labels .label .body .pic { /* ボディーアニメーション */

	transform: translateY(10px);

}

#labels .label .body .logo { /* ボディーアニメーション */

	transform: translateY(-10px);

}

#labels .label .body .pics li.on .pic,

#labels .label .body .pics li.on .logo { /* ボディーアニメーション */

	opacity: 1;

	transform: translateY(0);

}



#labels .label .body .texts {

	width: calc(1048 var(--pcp));

	margin: 0 auto;

}

#labels .label .body .texts .desc {

	width: 368px;

	font-size: 12px;

	line-height: calc(20 / 12);

	font-family: "dnp-shuei-gothic-gin-std";

	font-weight: 500;

}

#labels .label .body .texts .credit {

	margin-top: 16px;

}

#labels .label .body .texts .credit li {

	font-size: 12px;

}

#labels .label .body .texts .credit li + li {

	margin-top: 0.6em;

}

#labels .label .body .texts .credit li a {

	text-decoration: underline;

	transition: opacity 0.2s ease-out;

}

#labels .label .body .texts .credit li .price {

	margin-left: 1em;

	display: inline-block;

}

#labels .label .body .pics li {

	position: relative;

}

#labels .label .body .pics li .logo {

	position: absolute;

	z-index: 4;

}



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

	#labels .label .body .texts .credit li a:hover {

		opacity: 0.7;

	}

	

	#labels .label .body .pics {

		display: flex;

		justify-content: center;

		align-items: flex-start;

		gap: 0 calc(148 var(--pcp));

	}

	#labels .label .body .pics.reverse {

		flex-direction: row-reverse;

	}

	#labels .label .body .pics li {

		width: calc(450 var(--pcp));

	}

	

	#labels .label .body .l1 { /* ボディーアニメーション */

		transition-delay: 0.3s;

	}

	#labels .label .body .pics li:nth-child(2) .pic { /* ボディーアニメーション */

		transition-delay: 0.6s;

	}

	#labels .label .body .l2 { /* ボディーアニメーション */

		transition-delay: 0.9s;

	}

	

	/* ボディーアニメーション（ロッソはロゴが3つあるので調整） */

	#labels .label#rosso .body .l1 { transition-delay: 0.3s; }

	#labels .label#rosso .body .l2 { transition-delay: 0.6s; }

	#labels .label#rosso .body .pics li:nth-child(2) .pic { transition-delay: 0.9s; }

	#labels .label#rosso .body .l3 { transition-delay: 1.2s; }



	/* ボディーアニメーション（ソニーはロゴが3つあるので調整） */

	#labels .label#sonny .body .l2 { transition-delay: 0.3s; }

	#labels .label#sonny .body .l3 { transition-delay: 0.6s; }

	#labels .label#sonny .body .pics li:nth-child(2) .pic { transition-delay: 0.9s; }

	#labels .label#sonny .body .l1 { transition-delay: 1.2s; }

}



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

	#labels .label .body {

		padding: calc(30 var(--spv)) 0 calc(90 var(--spv));

	}

	

	#labels .label .body .texts {

		width: calc(300 var(--spp));

	}

	#labels .label .body .texts .desc {

		width: auto;

		font-size: calc(12 var(--spv));

	}

	#labels .label .body .texts .credit {

		margin-top: calc(34 var(--spv));

	}

	#labels .label .body .texts .credit li {

		font-size: calc(12 var(--spv));

		line-height: calc(18 / 12);

	}

	

	#labels .label .pics {

		width: calc(300 var(--spp));

		margin: 0 auto;

	}

	#labels .label .pics li + li {

		margin-top: calc(40 var(--spv));

	}

	

	#labels .label .body .logo { /* ボディーアニメーション */

		transition-delay: 0.3s;

	}

	

	/* ボディーアニメーション（ロッソ、KBF、sonnyは一つの .pics li 内にロゴが2つあるので調整） */

	#labels .label#rosso .body .logo.l2,

	#labels .label#kbf .body .logo.l2,

	#labels .label#sonny .body .logo.l2 {

		transition-delay: 0.6s;

	}

}



/* -------------------------------------------------

	#ur-m

------------------------------------------------- */



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

	#ur-m {

		margin-top: -285px; /* #ur-m のみ、サイドメニュー分トップ位置を戻す */

	}

	#ur-m .head .l1 {

		width: calc(456 var(--pcp));

		right: calc(162 var(--pcp));

		top: calc(221 var(--pcv));

	}

	#ur-m .head .l2 {

		width: calc(299 var(--pcp));

		right: calc(241 var(--pcp));

		top: calc(457 var(--pcv));

	}

	

	#ur-m .body .pics {

		margin-top: 195px;

	}

	#ur-m .body .pics .l1 {

		width: calc(301 / 450 * 100%);

		left: calc(-31 / 450 * 100%);

		top: calc(-61 / 633 * 100%);

	}

	#ur-m .body .pics .l2 {

		width: calc(283 / 450 * 100%);

		left: calc(83.4 / 450 * 100%);

		top: calc(52 / 633 * 100%);

	}

}



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

	#ur-m .head .l1 {

		width: calc(227 var(--spp));

		left: calc(74 var(--spp));

		top: calc(30 var(--spv));

	}

	#ur-m .head .l2 {

		width: calc(222 var(--spp));

		left: calc(76 var(--spp));

		bottom: calc(19 var(--spv));

	}

	

	#ur-m .body .pics {

		margin-top: calc(132 var(--spv));

	}

	#ur-m .body .pics .l1 {

		width: calc(186 / 300 * 100%);

		left: calc(57 / 300 * 100%);

		top: calc(-45 / 422 * 100%);

	}

	#ur-m .body .pics .l2 {

		width: calc(202 / 300 * 100%);

		left: calc(49 / 300 * 100%);

		top: calc(33 / 422 * 100%);

	}

}



/* -------------------------------------------------

	#ur-w

------------------------------------------------- */



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

	#ur-w .head .l1 {

		width: calc(386 var(--pcp));

		right: calc(186 var(--pcp));

		top: calc(252 var(--pcv));

	}

	#ur-w .head .l2 {

		width: calc(266 var(--pcp));

		right: calc(246 var(--pcp));

		top: calc(475 var(--pcv));

	}

	

	#ur-w .body .pics {

		margin-top: 65px;

	}

	#ur-w .body .pics li:first-child {

		margin-top: 92px;

	}

	#ur-w .body .pics .l1 {

		width: calc(203 / 450 * 100%);

		left: calc(123 / 450 * 100%);

		top: calc(-59 / 633 * 100%);

	}

	#ur-w .body .pics .l2 {

		width: calc(266 / 450 * 100%);

		right: calc(-54 / 450 * 100%);

		bottom: calc(-111 / 633 * 100%);

	}

}



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

	#ur-w .head .l1 {

		width: calc(263 var(--spp));

		left: calc(56 var(--spp));

		top: calc(27 var(--spv));

	}

	#ur-w .head .l2 {

		width: calc(177 var(--spp));

		left: calc(99 var(--spp));

		bottom: calc(20 var(--spv));

	}

	

	#ur-w .body .pics {

		margin-top: calc(130 var(--spv));

	}

	#ur-w .body .pics li:last-child {

		padding-bottom: calc(70 var(--spv));

	}

	#ur-w .body .pics .l1 {

		width: calc(149 / 300 * 100%);

		left: calc(76 / 300 * 100%);

		top: calc(-57 / 422 * 100%);

	}

	#ur-w .body .pics .l2 {

		width: calc(177 / 300 * 100%);

		right: calc(-16 / 300 * 100%);

		bottom: 0;

	}

}



/* -------------------------------------------------

	#doors-m

------------------------------------------------- */



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

	#doors-m .head .l1 {

		width: calc(384 var(--pcp));

		right: calc(107 var(--pcp));

		top: calc(220 var(--pcv));

	}

	#doors-m .head .l2 {

		width: calc(311 var(--pcp));

		right: calc(144 var(--pcp));

		top: calc(479 var(--pcv));

	}

	

	#doors-m .body .pics {

		margin-top: 90px;

	}

	#doors-m .body .pics .l1 {

		width: calc(191 / 450 * 100%);

		left: calc(244 / 450 * 100%);

		top: calc(-53 / 633 * 100%);

	}

	#doors-m .body .pics .l2 {

		width: calc(207 / 450 * 100%);

		right: calc(-42 / 450 * 100%);

		top: calc(38 / 633 * 100%);

	}

}



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

	#doors-m .head .l1 {

		width: calc(194 var(--spp));

		left: calc(91 var(--spp));

		top: calc(40 var(--spv));

	}

	#doors-m .head .l2 {

		width: calc(157 var(--spp));

		left: calc(110 var(--spp));

		top: calc(171 var(--spv));

	}

	

	#doors-m .body .pics {

		margin-top: calc(80 var(--spv));

	}

	#doors-m .body .pics li + li {

		margin-top: calc(91 var(--spv));

	}

	#doors-m .body .pics .l1 {

		width: calc(170 / 300 * 100%);

		right: calc(-6 / 300 * 100%);

		top: calc(-20 / 422 * 100%);

	}

	#doors-m .body .pics .l2 {

		width: calc(195 / 300 * 100%);

		left: calc(-19 / 300 * 100%);

		top: calc(-30 / 422 * 100%);

	}

}



/* -------------------------------------------------

	#doors-w

------------------------------------------------- */



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

	#doors-w .head .l1 {

		width: calc(486 var(--pcp));

		left: calc(72 var(--pcp));

		top: calc(186 var(--pcv));

	}

	#doors-w .head .l2 {

		width: calc(272 var(--pcp));

		left: calc(179 var(--pcp));

		top: calc(492 var(--pcv));

	}

	

	#doors-w .body .pics {

		margin-top: 105px;

	}

	#doors-w .body .pics .l1 {

		width: calc(241 / 450 * 100%);

		left: calc(101 / 450 * 100%);

		top: calc(-34 / 633 * 100%);

	}

	#doors-w .body .pics .l2 {

		width: calc(226 / 450 * 100%);

		right: calc(-58 / 450 * 100%);

		top: calc(116 / 633 * 100%);

	}

}



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

	#doors-w .head .l1 {

		width: calc(279 var(--spp));

		left: calc(48 var(--spp));

		top: calc(29 var(--spv));

	}

	#doors-w .head .l2 {

		width: calc(156 var(--spp));

		left: calc(109 var(--spp));

		top: calc(205 var(--spv));

	}

	

	#doors-w .body .pics {

		margin-top: calc(90 var(--spv));

	}

	#doors-w .body .pics .l1 {

		width: calc(173 / 300 * 100%);

		right: calc(10 / 300 * 100%);

		top: calc(-21 / 422 * 100%);

	}

	#doors-w .body .pics .l2 {

		width: calc(226 / 300 * 100%);

		left: calc(20 / 300 * 100%);

		top: calc(19 / 422 * 100%);

	}

}



/* -------------------------------------------------

	#rosso

------------------------------------------------- */



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

	#rosso .head .l1 {

		width: calc(324 var(--pcp));

		left: calc(559 var(--pcp));

		bottom: calc(216 var(--pcv));

	}

	#rosso .head .l2 {

		width: calc(179 var(--pcp));

		left: calc(630 var(--pcp));

		bottom: calc(121 var(--pcv));

	}

	#rosso .head .l3 {

		width: calc(398 var(--pcp));

		left: calc(521 var(--pcp));

		bottom: calc(65 var(--pcv));

	}

	

	#rosso .body .pics {

		margin-top: 95px;

	}

	#rosso .body .pics .l1 {

		width: calc(286 / 450 * 100%);

		left: calc(82 / 450 * 100%);

		top: calc(49 / 633 * 100%);

	}

	#rosso .body .pics .l2 {

		width: calc(154 / 450 * 100%);

		right: calc(-22 / 450 * 100%);

		bottom: calc(151 / 633 * 100%);

	}

	#rosso .body .pics .l3 {

		width: calc(222 / 450 * 100%);

		right: calc(-90 / 450 * 100%);

		bottom: calc(120 / 633 * 100%);

	}

}



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

	#rosso .head .l1 {

		width: calc(227 var(--spp));

		left: calc(74 var(--spp));

		bottom: calc(132 var(--spv));

	}

	#rosso .head .l2 {

		width: calc(125 var(--spp));

		left: calc(125 var(--spp));

		bottom: calc(66 var(--spv));

	}

	#rosso .head .l3 {

		width: calc(279 var(--spp));

		left: calc(48 var(--spp));

		bottom: calc(26 var(--spv));

	}

	

	#rosso .body .pics {

		margin-top: calc(90 var(--spv));

	}

	#rosso .body .pics .l1 {

		width: calc(209 / 300 * 100%);

		left: calc(51 / 300 * 100%);

		top: calc(32 / 422 * 100%);

	}

	#rosso .body .pics .l2 {

		width: calc(143 / 300 * 100%);

		left: calc(78 / 300 * 100%);

		bottom: calc(62 / 422 * 100%);

	}

	#rosso .body .pics .l3 {

		width: calc(212 / 300 * 100%);

		right: calc(-14 / 300 * 100%);

		top: calc(69 / 422 * 100%);

	}

}



/* -------------------------------------------------

	#kbf

------------------------------------------------- */



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

	#kbf .head {

		padding-top: calc(336 var(--pcv));

	}

	#kbf .head .pic {

		width: calc(880 var(--pcp));

		margin: 0 auto;

		display: block;

	}

	#kbf .head .l1 {

		width: calc(207 var(--pcp));

		left: calc(619 var(--pcp));

		top: calc(113 var(--pcv));

	}

	#kbf .head .l2 {

		width: calc(265 var(--pcp));

		left: calc(588 var(--pcp));

		top: calc(312 var(--pcv));

	}

	

	#labels #kbf .body .texts {

		width: calc(880 var(--pcp));

	}

	

	#kbf .body .pics {

		margin-top: 115px;

	}

	#kbf .body .pics .l1 {

		width: calc(149 / 450 * 100%);

		left: calc(150 / 450 * 100%);

		bottom: calc(29 / 633 * 100%);

	}

	#kbf .body .pics .l2 {

		width: calc(233 / 450 * 100%);

		left: calc(-43 / 450 * 100%);

		top: calc(114 / 633 * 100%);

	}

}



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

	#kbf .head {

		padding-top: calc(210 var(--spv));

	}

	#kbf .head .l1 {

		width: calc(126 var(--spp));

		left: calc(126 var(--spp));

		top: calc(73 var(--spv));

	}

	#kbf .head .l2 {

		width: calc(161 var(--spp));

		left: calc(107 var(--spp));

		top: calc(194 var(--spv));

	}

	

	#kbf .body .pics {

		margin-top: calc(60 var(--spv));

	}

	#kbf .body .pics .l1 {

		width: calc(92 / 300 * 100%);

		right: calc(38 / 300 * 100%);

		top: calc(-23 / 422 * 100%);

	}

	#kbf .body .pics .l2 {

		width: calc(155 / 300 * 100%);

		left: calc(-18 / 300 * 100%);

		top: calc(76 / 422 * 100%);

	}

}



/* -------------------------------------------------

	#sense

------------------------------------------------- */



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

	#sense .head .l1 {

		width: calc(488 var(--pcp));

		right: calc(150 var(--pcp));

		top: calc(324 var(--pcv));

	}

	#sense .head .l2 {

		width: calc(371 var(--pcp));

		right: calc(175 var(--pcp));

		top: calc(377 var(--pcv));

	}

	

	#sense .body .pics {

		margin-top: 90px;

	}

	#sense .body .pics .l1 {

		width: calc(176 / 450 * 100%);

		left: calc(-79 / 450 * 100%);

		top: calc(43 / 633 * 100%);

	}

	#sense .body .pics .l2 {

		width: calc(302 / 450 * 100%);

		right: calc(-66 / 450 * 100%);

		top: calc(69 / 633 * 100%);

	}

}



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

	#sense .head .l1 {

		width: calc(320 var(--spp));

		left: calc(27 var(--spp));

		bottom: calc(89 var(--spv));

	}

	#sense .head .l2 {

		width: calc(243 var(--spp));

		left: calc(88 var(--spp));

		bottom: calc(28 var(--spv));

	}

	

	#sense .body .pics {

		margin-top: calc(65 var(--spv));

	}

	#sense .body .pics .l1 {

		width: calc(147 / 300 * 100%);

		right: calc(-14 / 300 * 100%);

		top: calc(17 / 422 * 100%);

	}

	#sense .body .pics .l2 {

		width: calc(214 / 300 * 100%);

		left: calc(58 / 300 * 100%);

		top: calc(27 / 422 * 100%);

	}

}



/* -------------------------------------------------

	#sonny

------------------------------------------------- */



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

	#sonny .head .l1 {

		width: calc(390 var(--pcp));

		left: calc(115 var(--pcp));

		top: calc(241 var(--pcv));

	}

	#sonny .head .l2 {

		width: calc(304 var(--pcp));

		left: calc(159 var(--pcp));

		top: calc(380 var(--pcv));

	}

	#sonny .head .l3 {

		width: calc(309 var(--pcp));

		left: calc(156 var(--pcp));

		top: calc(495 var(--pcv));

	}

	

	#sonny .body .pics {

		margin-top: 110px;

	}

	#sonny .body .pics li:last-child {

		margin-top: 95px;

	}

	#sonny .body .pics .l1 {

		width: calc(294 / 450 * 100%);

		left: calc(269 / 450 * 100%);

		top: calc(-115 / 633 * 100%);

	}

	#sonny .body .pics .l2 {

		width: calc(175 / 450 * 100%);

		right: calc(-23 / 450 * 100%);

		top: calc(116 / 633 * 100%);

	}

	#sonny .body .pics .l3 {

		width: calc(249 / 450 * 100%);

		right: calc(-88 / 450 * 100%);

		bottom: calc(-53 / 633 * 100%);

	}

}



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

	#sonny .head .l1 {

		width: calc(218 var(--spp));

		left: calc(13 var(--spp));

		bottom: calc(116 var(--spv));

	}

	#sonny .head .l2 {

		width: calc(170 var(--spp));

		left: calc(42 var(--spp));

		bottom: calc(58 var(--spv));

	}

	#sonny .head .l3 {

		width: calc(173 var(--spp));

		left: calc(41 var(--spp));

		bottom: calc(25 var(--spv));

	}

	

	#sonny .body .pics {

		margin-top: calc(175 var(--spv));

	}

	#sonny .body .pics .l1 {

		width: calc(218 / 300 * 100%);

		left: calc(40 / 300 * 100%);

		top: calc(-92 / 422 * 100%);

	}

	#sonny .body .pics .l2 {

		width: calc(133 / 300 * 100%);

		left: calc(84 / 300 * 100%);

		top: calc(-18 / 422 * 100%);

	}

	#sonny .body .pics .l3 {

		width: calc(201 / 300 * 100%);

		left: calc(-19 / 300 * 100%);

		bottom: calc(34 / 422 * 100%);

	}

}



/* -------------------------------------------------

	#bottom-links

------------------------------------------------- */



#bottom-links {

	padding: 50px 0 128px;

	text-align: center;

	background: #F0EACB;

}

#bottom-links ul li a {

	display: inline-block;

}

#bottom-links ul li a img {

	display: block;

	margin: 0 auto;

}

#bottom-links ul li.ur a img {

	height: 47px;

}

#bottom-links ul li.lee a img {

	height: 43px;

}

#bottom-links ul li.collabo a img {

	height: 65px;

}

#bottom-links ul li a p {

	font-size: 13px;

	text-decoration: underline;

	letter-spacing: 0.06em;

}



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

	#bottom-links ul {

		display: flex;

		justify-content: center;

	}

	#bottom-links ul li.lee {

		margin-left: 150px;

	}

	#bottom-links ul li.collabo {

		margin-left: 121px;

	}

	#bottom-links ul li a .logo {

		height: 72px;

	}

	#bottom-links ul li.ur a .logo {

		padding-top: 7px;

	}

	#bottom-links ul li.collabo a .logo {

		padding-top: 4px;

	}

}



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

	#bottom-links {

		padding: calc(60 var(--spv)) 0 calc(80 var(--spv));

	}

	#bottom-links ul li + li {

		margin-top: calc(52 var(--spv));

	}

	#bottom-links ul li.ur a img {

		height: calc(47 var(--spv));

	}

	#bottom-links ul li.lee a img {

		height: calc(43 var(--spv));

	}

	#bottom-links ul li.collabo a img {

		height: calc(65 var(--spv));

		transform: translateX(12px);

	}

	#bottom-links ul li a p {

		margin-top: calc(12 var(--spv));

		font-size: calc(13 var(--spv));

	}

	#bottom-links ul li.collabo a p {

		margin-top: calc(4 var(--spv));

	}

}