@charset "UTF-8";

/* -----------------------------------
MV
----------------------------------- */
.mv-wrap {
	background-image: url(https://bcx-png-11im3331.landinghub.site/.landinghub/https%3A%2F%2Funuborero.com%2Fimg%2Ftop%2Fsp%2Fmv_bg.png), linear-gradient(to bottom, #ed7fa4 0%, #ed7fa4 70%, #ffffff 70%, #ffffff 100%);
	background-repeat: no-repeat;
	background-size: cover;
}
.mv-block {
	margin-bottom: calc(87vw / 8.28);
	overflow-x: hidden;
}
.mv-block .phrase-wrap {
	padding-top: calc(100vw / 8.28);
	overflow: hidden;
}
.mv-block .phrase {
	overflow: hidden;
}
.mv-block .phrase.num-1 {
	width: calc(416vw / 8.28);
	margin-top: calc(-45vw / 8.28);
	margin-left: calc(57vw / 8.28);
}
.mv-block .phrase.num-2 {
	width: calc(609vw / 8.28);
	margin-left: calc(124vw / 8.28);
	margin-top: calc(-108vw / 8.28);
}
.mv-block .border.num-1 {
	width: calc(396vw / 8.28);
	margin-left: calc(94vw / 8.28);
	margin-top: calc(-188vw / 8.28);
}
.mv-block .border.num-2 {
	width: calc(595vw / 8.28);
	margin-left: calc(155vw / 8.28);
	margin-top: calc(-200vw / 8.28);
}
.mv-block .border.num-2.animate__animated {
	animation-delay: .5s;
}
.mv-block .heart {
	width: calc(62vw / 8.28);
	margin-left: calc(415vw / 8.28);
	position: relative;
	z-index: 1;
	opacity: 0;
	transition: opacity .5s ease-in-out;
}
.mv-block .heart.is-show {
	opacity: 1;
	animation-delay: 2s;
}
.mv-content {
	position: relative;
	height: calc(890vw / 8.28);
	overflow-y: hidden;
  overflow-x: hidden;
	scrollbar-width: none;
}
.mv-content::-webkit-scrollbar {
	display: none;
}
.mv-block .face,
.mv-block .letter {
	position: relative;
}
.mv-block .face .num-2.animate__animated {
	animation-delay: .4s;
}
.mv-block .face .num-3.animate__animated {
	animation-delay: .8s;
}
.mv-block .unu-letter {
	opacity: 1;
	transition: opacity 1s .5s ease-in-out;
}
.mv-block .finished .unu-letter {
	opacity: .2;
}
.mv-block .face li,
.mv-block .letter li {
	display: inline-block;
	position: absolute;
}
.mv-block .face .num-1,
.mv-block .face .num-3 {
	width: calc(241vw / 8.28);
}
.mv-block .face .num-2 {
	width: calc(181vw / 8.28);
}
.mv-block .face .num-1 {
	left: calc(190vw / 8.28);
}
.mv-block .face .num-2 {
	left: calc(370vw / 8.28);
	top: calc(256vw / 8.28);
}
.mv-block .face .num-3 {
	left: calc(640vw / 8.28);
	top: calc(198vw / 8.28);
}
.mv-block .letter-wrap {
	position: absolute;
	top: calc(152vw / 8.28);
}
.mv-block .letter.anim-box li {
	visibility: hidden;
}
.mv-block .letter.anim-box li.finished {
	visibility: visible;
}
.mv-block .letter.anim-box li.is-animated {
	visibility: visible;
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.mv-block .letter .i-1 {
	width: calc(80vw / 8.28);
	left: calc(77vw / 8.28);
	top: calc(299vw / 8.28);
}
.mv-block .letter .l-1 {
	width: calc(83vw / 8.28);
	left: calc(82vw / 8.28);
	top: calc(345vw / 8.28);
}
.mv-block .letter .o-1 {
	width: calc(60vw / 8.28);
	left: calc(87vw / 8.28);
	top: calc(372vw / 8.28);
}
.mv-block .letter .v-1 {
	width: calc(62vw / 8.28);
	left: calc(99vw / 8.28);
	top: calc(404vw / 8.28);
}
.mv-block .letter .e-1 {
	width: calc(55vw / 8.28);
	left: calc(116vw / 8.28);
	top: calc(448vw / 8.28);
}
.mv-block .letter .e-2 {
	width: calc(53vw / 8.28);
	left: calc(147vw / 8.28);
	top: calc(498vw / 8.28);
}
.mv-block .letter .v-2 {
	width: calc(60vw / 8.28);
	left: calc(172vw / 8.28);
	top: calc(520vw / 8.28);
}
.mv-block .letter .e-3 {
	width: calc(49vw / 8.28);
	left: calc(201vw / 8.28);
	top: calc(555vw / 8.28);
}
.mv-block .letter .r-1 {
	width: calc(52vw / 8.28);
	left: calc(224vw / 8.28);
	top: calc(579vw / 8.28);
}
.mv-block .letter .y-1 {
	width: calc(63vw / 8.28);
	left: calc(249vw / 8.28);
	top: calc(593vw / 8.28);
}
.mv-block .letter .p-1 {
	width: calc(62vw / 8.28);
	left: calc(298vw / 8.28);
	top: calc(629vw / 8.28);
}
.mv-block .letter .a-1 {
	width: calc(43vw / 8.28);
	left: calc(356vw / 8.28);
	top: calc(645vw / 8.28);
}
.mv-block .letter .r-2 {
	width: calc(36vw / 8.28);
	left: calc(395vw / 8.28);
	top: calc(658vw / 8.28);
}
.mv-block .letter .t-1 {
	width: calc(29vw / 8.28);
	left: calc(436vw / 8.28);
	top: calc(651vw / 8.28);
}
.mv-block .letter .o-2 {
	width: calc(40vw / 8.28);
	left: calc(483vw / 8.28);
	top: calc(673vw / 8.28);
}
.mv-block .letter .f-1 {
	width: calc(28vw / 8.28);
	left: calc(526vw / 8.28);
	top: calc(650vw / 8.28);
}
.mv-block .letter .m-1 {
	width: calc(67vw / 8.28);
	left: calc(578vw / 8.28);
	top: calc(662vw / 8.28);
}
.mv-block .letter .y-2 {
	width: calc(50vw / 8.28);
	left: calc(638vw / 8.28);
	top: calc(645vw / 8.28);
}
.mv-block .letter .s-1 {
	width: calc(45vw / 8.28);
	left: calc(681vw / 8.28);
	top: calc(630vw / 8.28);
}
.mv-block .letter .e-4 {
	width: calc(48vw / 8.28);
	left: calc(714vw / 8.28);
	top: calc(613vw / 8.28);
}
.mv-block .letter .l-2 {
	width: calc(56vw / 8.28);
	left: calc(728vw / 8.28);
	top: calc(578vw / 8.28);
}
.mv-block .letter .f-2 {
	width: calc(56vw / 8.28);
	left: calc(751vw / 8.28);
	top: calc(556vw / 8.28);
}
.mv-block .mv-product.shake-start {
	animation: shake-up 3s infinite ease-in-out;
}
@keyframes shake-up {
	0%, 100% {
			transform: translateY(0);
	}
	50% {
			transform: translateY(5px);
	}
}
.mv-block .product-sh {
	position: absolute;
	top: calc(236vw / 8.28);
	left: calc(85vw / 8.28);
	width: calc(378vw / 8.28);
}
.mv-block .product-tr {
	position: absolute;
	top: 0;
	right: calc(116vw / 8.28);
	width: calc(293vw / 8.28);
}
.mv-block .link-wrap {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	margin-left: calc(48vw / 8.28);
}
.mv-block .link-wrap .logo {
	width: calc(352vw / 8.28);
}
.mv-block .link-wrap .hop-area {
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	visibility: hidden;
	margin-left: calc(24vw / 8.28);
	padding-top: calc(20vw / 8.28);
}
.mv-block .link-wrap .hop-area .txt {
	font-size: calc(63vw / 8.28);
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.1em;
	line-height: 1;
}
.mv-block .hop-area.is-inview {
	visibility: visible;
}
.mv-block .hop-area .hop-arrow {
	opacity: 0;
}
.mv-block .hop-area.is-inview .txt,
.mv-block .hop-area.is-inview .hop-arrow {
	opacity: 0;
	animation: textanimation 0.8s ease-out forwards;
}
.mv-block .hop-area.is-inview .txt:nth-child(1) {
	animation-delay: 0.2s;
}
.mv-block .hop-area.is-inview .txt:nth-child(2) {
	animation-delay: 0.4s;
}
.mv-block .hop-area.is-inview .txt:nth-child(3) {
	animation-delay: 0.6s;
}
.mv-block .hop-area.is-inview .txt:nth-child(4) {
	animation-delay: 0.8s;
}
.mv-block .hop-area.is-inview .txt:nth-child(5) {
	animation-delay: 1s;
}
.mv-block .hop-area.is-inview .txt:nth-child(6) {
	animation-delay: 1.2s;
}
.mv-block .hop-area.is-inview .hop-arrow {
	animation-delay: 1.6s;
}
@keyframes textanimation {
	0% {
			transform: translateY(40px);
			opacity: 0;
	}

	50% {
			transform: translateY(-5px);
			opacity: 1;
	}

	100% {
			transform: translateY(0);
			opacity: 1;
	}
}
.mv-block .hop-arrow {
	margin-left: calc(20vw / 8.28);
	margin-top: calc(46vw / 8.28);
	transition: 500ms;
}
.mv-block .hop-arrow .arrow {
	width: calc(105vw / 8.28);
	height: calc(105vw / 8.28);
}
.mv-block .hop-arrow a {
	transition: 500ms;
}
.mv-block .hop-arrow a:hover {
	margin-left: calc(20vw / 8.28);
}
.mv-block .hop-arrow .arrow .path {
	fill: #fff;
	transition: 500ms;
}
.mv-block .hop-arrow a:hover .arrow .path {
	fill: #ed7fa4;
}

/*-- PC --------*/
@media screen and (min-width: 769px) {
	.mv-block {
		margin-bottom: calc(67vw / 19.2);
	}
	.mv-block .phrase-wrap {
		padding-top: calc(85vw / 19.2);
	}
	.mv-block .heart {
    width: calc(50vw / 19.2);
		margin-left: calc(320vw / 19.2);
	}
	.mv-block .phrase.num-1 {
		width: calc(322vw / 19.2);
    margin-top: calc(-37vw / 19.2);
    margin-left: calc(44vw / 19.2);
	}
	.mv-block .border.num-1 {
    width: calc(308vw / 19.2);
    margin-left: calc(69vw / 19.2);
    margin-top: calc(-148vw / 19.2);
	}
	.mv-block .phrase.num-2 {
		width: calc(472vw / 19.2);
    margin-top: calc(-82vw / 19.2);
    margin-left: calc(97vw / 19.2);
	}
	.mv-block .border.num-2 {
    width: calc(462vw / 19.2);
    margin-left: calc(118vw / 19.2);
    margin-top: calc(-157vw / 19.2);
	}
	.mv-block .letter-wrap {
		top: calc(117vw / 19.2);
	}
	.mv-block .face .num-1,
	.mv-block .face .num-3 {
		width: calc(185vw / 19.2);
	}
	.mv-block .face .num-2 {
		width: calc(140vw / 19.2);
		top: calc(202vw / 19.2);
		left: calc(294vw / 19.2);
	}
	.mv-block .face .num-1 {
		left: calc(152vw / 19.2);
	}
	.mv-block .face .num-3 {
		top: calc(152vw / 19.2);
		left: calc(498vw / 19.2);
	}
	.mv-content {
    height: calc(684vw / 19.2);
	}
	.mv-block .product-sh {
		top: calc(182vw / 19.2);
    left: calc(65vw / 19.2);
    width: calc(298vw / 19.2);
	}
	.mv-block .product-tr {
    left: calc(326vw / 19.2);
    width: calc(229vw / 19.2);
	}
	.mv-block .link-wrap {
		margin-left: calc(37vw / 19.2);
	}
	.mv-block .logo {
		max-width: calc(273vw / 19.2);
		width: 100%;
	}
	.mv-block .link-wrap .hop-area {
		margin-left: calc(17vw / 19.2);
		letter-spacing: 0.02em;
	}
	.mv-block .link-wrap .hop-area .txt {
		font-size: calc(48vw / 19.2);
	}
	.mv-block .hop-arrow {
		margin-left: calc(18vw / 19.2);
		margin-top: calc(34vw / 19.2);
	}
	.mv-block .hop-arrow .arrow {
		width: calc(84vw / 19.2);
		height: calc(84vw / 19.2);
	}
	.mv-block .hop-arrow:hover {
		margin-left: calc(30vw / 19.2);
	}
	.mv-block .letter .i-1 {
		width: calc(61vw / 19.2);
		left: calc(60vw / 19.2);
		top: calc(232vw / 19.2);
	}
	.mv-block .letter .l-1 {
		width: calc(63vw / 19.2);
		left: calc(64vw / 19.2);
		top: calc(270vw / 19.2);
	}
	.mv-block .letter .o-1 {
		width: calc(46vw / 19.2);
		left: calc(68vw / 19.2);
		top: calc(288vw / 19.2);
	}
	.mv-block .letter .v-1 {
		width: calc(48vw / 19.2);
		left: calc(77vw / 19.2);
		top: calc(314vw / 19.2);
	}
	.mv-block .letter .e-1 {
		width: calc(43vw / 19.2);
		left: calc(90vw / 19.2);
		top: calc(348vw / 19.2);
	}
	.mv-block .letter .e-2 {
		width: calc(41vw / 19.2);
		left: calc(114vw / 19.2);
		top: calc(387vw / 19.2);
	}
	.mv-block .letter .v-2 {
		width: calc(46vw / 19.2);
		left: calc(133vw / 19.2);
		top: calc(403vw / 19.2);
	}
	.mv-block .letter .e-3 {
		width: calc(38vw / 19.2);
		left: calc(155vw / 19.2);
		top: calc(431vw / 19.2);
	}
	.mv-block .letter .r-1 {
		width: calc(42vw / 19.2);
		left: calc(174vw / 19.2);
		top: calc(449vw / 19.2);
	}
	.mv-block .letter .y-1 {
		width: calc(48vw / 19.2);
		left: calc(193vw / 19.2);
		top: calc(461vw / 19.2);
	}
	.mv-block .letter .p-1 {
		width: calc(48vw / 19.2);
		left: calc(231vw / 19.2);
		top: calc(487vw / 19.2);
	}
	.mv-block .letter .a-1 {
		width: calc(33vw / 19.2);
		left: calc(275vw / 19.2);
		top: calc(500vw / 19.2);
	}
	.mv-block .letter .r-2 {
		width: calc(28vw / 19.2);
		left: calc(306vw / 19.2);
		top: calc(510vw / 19.2);
	}
	.mv-block .letter .t-1 {
		width: calc(23vw / 19.2);
		left: calc(337vw / 19.2);
		top: calc(504vw / 19.2);
	}
	.mv-block .letter .o-2 {
		width: calc(31vw / 19.2);
		left: calc(374vw / 19.2);
		top: calc(521vw / 19.2);
	}
	.mv-block .letter .f-1 {
		width: calc(21vw / 19.2);
		left: calc(407vw / 19.2);
		top: calc(503vw / 19.2);
	}
	.mv-block .letter .m-1 {
		width: calc(52vw / 19.2);
		left: calc(447vw / 19.2);
		top: calc(513vw / 19.2);
	}
	.mv-block .letter .y-2 {
		width: calc(39vw / 19.2);
		left: calc(494vw / 19.2);
		top: calc(500vw / 19.2);
	}
	.mv-block .letter .s-1 {
		width: calc(35vw / 19.2);
		left: calc(527vw / 19.2);
		top: calc(488vw / 19.2);
	}
	.mv-block .letter .e-4 {
		width: calc(38vw / 19.2);
		left: calc(553vw / 19.2);
		top: calc(475vw / 19.2);
	}
	.mv-block .letter .l-2 {
		width: calc(44vw / 19.2);
		left: calc(564vw / 19.2);
		top: calc(448vw / 19.2);
	}
	.mv-block .letter .f-2 {
		width: calc(43vw / 19.2);
		left: calc(581vw / 19.2);
		top: calc(431vw / 19.2);
	}
	.mv-block .hop-arrow a:hover {
		margin-left: calc(10vw / 19.2);
	}
}
/* -----------------------------------
MV SECONDARY
----------------------------------- */
.mv-secondary .movie-content {
	display: block;
}
.mv-secondary .movie-content .top-movie {
	width: calc(745vw / 8.28);
	margin-right: calc(22vw / 8.28);
}
.mv-secondary .img-wrap {
	display: flex;
	align-items: center;
}
.mv-secondary .img {
	display: none;
}
.mv-secondary .logo {
	width: calc(24vw / 8.28);
}
.mv-secondary .phrase {
	width: calc(700vw / 8.28);
	margin: calc(-72vw / 8.28) auto 0;
	position: relative;
}
.mv-secondary .phrase .mark {
	position: absolute;
	right: calc(-25vw / 8.28);
	top: 0;
	font-size: calc(16vw / 8.28);
	color: #fff;
}
.mv-secondary .cap {
	color: #fff;
	line-height: 1.5;
	letter-spacing: -0.01em;
	text-align: right;
	padding: 0 calc(65vw / 8.28) calc(230vw / 8.28) 0;
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.mv-secondary .movie-content {
		display: none;
	}
	.mv-secondary .img {
		display: block;
    width: calc(575vw / 19.2);
    margin-right: calc(17vw / 19.2);
	}
	.mv-secondary .logo {
		width: calc(18vw / 19.2);
	}
	.mv-secondary .phrase {
		width: calc(542vw / 19.2);
		margin: calc(-53vw / 19.2) auto 0;
	}
	.mv-secondary .cap {
		padding: 0 calc(50vw / 19.2) calc(180vw / 19.2) 0;
	}
	.mv-secondary .phrase .mark {
		right: calc(-18vw / 19.2);
		font-size: calc(12vw / 19.2);
	}
}

/* -----------------------------------
CONCEPT
----------------------------------- */
.concept-block {
	background-color: #fff;
}
.concept-block .heading {
	margin: calc(100vw / 8.28) 0 calc(157vw / 8.28);
}
.concept-block .responsive-svg,
.concept-block .text-wrap {
  position: absolute;
  top: 0;
	left: -13.647342995169082%;
  width: 100%;
  height: 100%;
}

.concept-block .char {
  position: absolute;
  font-family: "Overpass", sans-serif;
  font-weight: 700;
  font-size: calc(44vw / 8.28);
  color: #ed7fa4;
  offset-rotate: auto;
  animation: moveAlongPath 15s linear infinite;
}
@keyframes moveAlongPath {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
.concept-block .content-wrap > div {
	position: relative;
}
.concept-block .top .top-image {
	width: calc(685vw / 8.28);
}
.concept-block .bottom .bottom-image {
	width: calc(606vw / 8.28);
	margin-left: auto;
}
.concept-block .txt {
	font-size: calc(33vw / 8.28);
	font-weight: 400;
	line-height: 1.8;
	text-align: center;
}
.concept-block .bottom .txt {
	text-align: left;
}
.concept-block .top .txt {
	text-align: right;
}
.concept-block .top .txt:nth-of-type(1) {
	margin-bottom: calc(40vw / 8.28);
}
.concept-block .description {
	position: absolute;
}
.concept-block .top .description {
	top: calc(228vw / 8.28);
	right: calc(44vw / 8.28);
}
.concept-block .bottom .description {
	top: calc(120vw / 8.28);
	left: calc(44vw / 8.28);
}
.concept-block .bottom .logo {
	width: calc(234vw / 8.28);
	margin: calc(135vw / 8.28) 0 0 calc(70vw / 8.28);
}
.concept-block .middle {
	margin: calc(50vw / 8.28) 0 calc(40vw / 8.28);
}
.concept-block .middle .txt {
	font-size: calc(45vw / 8.28);
	letter-spacing: 0.115em;
	line-height: 1.64;
	font-weight: 700;
	text-align: center;
}
.concept-block .character {
	width: calc(98vw / 8.28);
	margin: 0 auto calc(56vw / 8.28);
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.concept-block {
		overflow-x: hidden;
	}
	.concept-block .heading {
		margin: calc(76vw / 19.2) 0 calc(122vw / 19.2);
	}
	.concept-block .top .top-image {
    width: calc(524vw / 19.2);
	}
	.concept-block .bottom .bottom-image {
		width: calc(470vw / 19.2);
	}
	.concept-block .txt {
		font-size: calc(23vw / 19.2);
		letter-spacing: 0.12em;
	}
	.concept-block .top .txt:nth-of-type(1) {
    margin-bottom: calc(40vw / 19.2);
	}
	.concept-block .top .description {
    top: calc(178vw / 19.2);
    right: calc(10vw / 8.28);
	}
	.concept-block .char {
		font-size: calc(40vw / 19.2);
	}
	.concept-block .middle {
    margin: calc(33vw / 19.2) 0 calc(30vw / 19.2);
	}
	.concept-block .middle .txt {
		font-size: calc(38vw / 19.2);
	}
	.concept-block .bottom .description {
    top: calc(86vw / 19.2);
    left: calc(34vw / 19.2);
	}
	.concept-block .bottom .logo {
		width: calc(182vw / 19.2);
		margin: calc(110vw / 19.2) 0 0 calc(63vw / 19.2);
	}
	.concept-block .character {
    width: calc(78vw / 19.2);
    margin: 0 auto calc(56vw / 19.2);
	}
}

/* -----------------------------------
PRODUCT
----------------------------------- */
.products-block {
	background-color: #00559e;
	padding-bottom: calc(140vw / 8.28);
}
.products-block .heading {
	padding-top: calc(80vw / 8.28);
	margin-bottom: calc(180vw / 8.28);
}
.products-block .section-title {
	color: #fff;
}
.products-block .section-title::after,
body#glossy .products-block .section-title::after {
	background-color: #fff;
}
.products-block .products-top {
	position: relative;
	margin-bottom: calc(90vw / 8.28);
}
.products-block .products-top .top-img {
	width: calc(659vw / 8.28);
	margin-left: auto;
}
.products-block .vertical-txt {
	display: flex;
	position: absolute;
	top: calc(-102vw / 8.28);
	left: calc(49vw / 8.28);
}
.products-block .vertical-txt .num-1 {
	width: calc(139vw / 8.28);
}
.products-block .vertical-txt .num-2 {
	width: calc(45vw / 8.28);
}
.products-block .products-txt {
	color: #fff;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: calc(630vw / 8.28);
	margin: 0 auto calc(90vw / 8.28);
}
.products-block .products-txt .txt-wrap {
	margin-right: auto;
}
#unu-products {
	padding-top: calc(190vw / 8.28);
	margin-top: calc(-190vw / 8.28);
}
.products-block .products-txt .txt {
	font-size: calc(31vw / 8.28);
	font-weight: 700;
	letter-spacing: 0.055em;
	line-height: 1.9;
}
.products-block .products-txt .cap {
	text-align: left;
	margin-top: calc(30vw / 8.28);
	display: flex;
	justify-content: flex-end;
}
.products-block .products-tab {
	width: calc(724vw / 8.28);
	margin: 0 auto;
}
.products-block .tab-area {
  cursor: pointer;
	display: flex;
	justify-content: space-between;
}
.products-block .tab-area .tab.num-1 .txt {
	letter-spacing: -.1em;
	justify-content: flex-start;
	padding-left: calc(14vw / 8.28);
}
.products-block .tab-area .tab.active.num-1 .txt {
	padding-right: 0;
	padding-left: 0;
}
.products-block .tab-area .tab.active .txt {
	justify-content: center;
}
.products-block .tab-area .tab.num-1 {
	z-index: 4;
}
.products-block .tab-area .tab.num-2 {
	z-index: 3;
}
.products-block .tab-area .tab.num-3 {
	z-index: 2;
}
.products-block .tab-area .tab.num-4 {
	z-index: 1;
}
.products-block .tab-area .tab.adjust-1.num-2 {
	z-index: 4;
}
.products-block .tab-area .tab.adjust-1.num-2 .txt,
.products-block .tab-area .tab.adjust-2.num-2 .txt,
.products-block .tab-area .tab.adjust-2.num-3 .txt {
	justify-content: flex-start;
}
.products-block .tab-area .tab.adjust-2.num-3 .txt {
	padding-left: calc(35vw / 8.28);
}
.products-block .tab-area .tab.num-3 .txt {
	padding-right: calc(35vw / 8.28);
}
.products-block .tab-area .tab.active.num-3 .txt {
	padding-right: calc(22vw / 8.28);
}
.products-block .tab-area .tab.adjust-2.num-1,
.products-block .tab-area .tab.adjust-2.num-3 {
	z-index: 3;
}
.products-block .tab-area .tab.active {
	z-index: 4;
}
.products-block .tab-area .tab:not(.num-1) {
	margin-left: calc(-109.9vw / 8.28);
}
.products-block .tab-area .tab {
	background-color: #fff;
	width: calc(280vw / 8.28);
	vertical-align: bottom;
	border: 2px solid #00559e;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom: none;
	position: relative;
	transition: background-color 0.4s ease;
}
.products-block .tab-area .tab .txt {
	color: #00559e;
	font-size: calc(24vw / 8.28);
	letter-spacing: 0.105em;
	line-height: 1.3;
	font-weight: 700;
	text-align: center;
	height: calc(106vw / 8.28);
	padding: calc(22vw / 8.28);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.products-block .tab-area .tab.active {
  background-color: #f6bfd2;
	width: calc(181vw / 8.28);
	padding-right: 0;
	padding-left: 0;
	border: none;
}
.products-block .tab-area .tab.num-1 {
	border-top-left-radius: 20px;
	border-left: none;
	letter-spacing: -0.1em;
}
.products-block .tab-area .tab.num-4 {
	border-right: none;
}
.products-block .panel-area {
	background-color: #f6bfd2;
	border-radius: 0 0 20px 20px;
	padding: calc(100vw / 8.28) 0 calc(96vw / 8.28);
	height: calc(1010vw / 8.28);
	position: relative;
}
.products-block .panel {
  display: none;
  text-align: center;
	color: #00559e;
}
#glossy .products-block .panel {
		color: #00999a;
}
.products-block .panel.active {
  display: block;
}
.products-block .panel .products-img {
	margin: 0 auto calc(80vw / 8.28);
	width: calc(529vw / 8.28);
}
.products-block .products-name {
	font-size: calc(26vw / 8.28);
	font-weight: 700;
	margin-bottom: calc(20vw / 8.28);
}
.products-block .num-4 .products-name:nth-of-type(2) {
	font-size: calc(23vw / 8.28);
}
.products-block .products-price {
	font-size: calc(23vw / 8.28);
	font-weight: 700;
}
.products-block .products-price .tax {
	font-size: calc(16vw / 8.28);
}
.products-block .common-btn {
	border: none;
}
.products-block .common-btn .btn {
	color: #00559e;
	border: unset;
}
body#glossy .products-block .common-btn .btn {
	border: unset;
}
.products-block .common-btn .btn::after {
	background-image: url(../img/top/sp/products_arrow.svg);
}
.products-block #products-modal {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(450vw / 8.28);
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 20px;
}
.products-block #products-modal .close {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(15vw / 8.28);
	width: calc(40vw / 8.28);
}
.products-block .common-btn.hide {
	display: none;
}
.products-block .modal-contents {
	display: flex;
	flex-wrap: wrap;
	padding: calc(50vw / 8.28) calc(30vw / 8.28) 0;
}
.products-block .modal-contents .common-btn {
	width: calc(50% - calc(40vw / 8.28));
	margin: 0 auto calc(40vw / 8.28);
}
.products-block .modal-contents .common-btn:last-child {
	width: 100%;
	margin: 0 calc(20vw / 8.28);
}
.products-block .modal-contents .common-btn .btn {
	width: 100%;
	height: calc(80vw / 8.28);
	font-size: calc(30vw / 8.28);
	letter-spacing: 0.075em;
}
.products-block .modal-contents .common-btn .btn .arrow {
	width: calc(34vw / 8.28);
	height: calc(34vw / 8.28);
}
.products-block .common-btn .btn .arrow .path {
	fill: #00559e;
}
.products-block .common-btn .btn:hover .arrow .path {
	fill: #ed7fa4;
}
.products-block .hover-line::after {
	background-color: #00559e;
}
.products-block .common-btn.modal-btn {
	margin-top: calc(80vw / 8.28);
}
.products-block .common-btn.modal-btn .btn:hover .arrow .path {
	fill: #00559e;
}
body#glossy .products-block .common-btn.modal-btn .btn:hover .arrow .path {
	fill: #00999a;
}
.products-block .common-btn.modal-btn .arrow {
	transition: transform 0.4s ease;
  transform-origin: left center;
}
.products-block .common-btn.modal-btn .btn:hover .arrow {
	transform: rotate(-90deg);
	right: calc(30vw / 8.28);
}
.products-block .products-txt sup {
	top: -.2em;
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.products-block .heading {
		padding: calc(60vw / 19.2) 0;
		margin-bottom: calc(80vw / 19.2);
	}
	.products-block .vertical-txt .num-1 {
		width: calc(108vw / 19.2);
	}
	.products-block .vertical-txt .num-2 {
		width: calc(36vw / 19.2);
	}
	.products-block .vertical-txt {
		top: calc(-80vw / 19.2);
		left: calc(38vw / 19.2);
	}
	.products-block .products-top {
		margin-bottom: calc(70vw / 19.2);
	}
	.products-block .products-top .top-img {
    width: calc(510vw / 19.2);
	}
	.products-block .products-txt {
		width: calc(450vw / 19.2);
		margin-bottom: calc(75vw / 19.2);
	}
	#unu-products {
		padding-top: calc(75vw / 19.2);
		margin-top: calc(-75vw / 19.2);
	}
	.products-block .products-txt .txt {
		font-size: calc(22vw / 19.2);
	}
	.products-block .products-txt .cap {
		margin-top: calc(20vw / 19.2);
	}
	.products-block .products-tab {
		width: calc(560vw / 19.2);
	}
	.products-block .tab-area .tab {
		width: calc(210vw / 19.2);
	}
	.products-block .tab-area .tab .txt {
		font-size: calc(16vw / 19.2);
		padding: calc(22vw / 19.2);
		height: calc(80vw / 19.2);
	}
	.products-block .tab-area .tab.active {
		width: calc(140vw / 19.2);
	}
	.products-block .tab-area .tab.num-3 .txt {
    padding-right: calc(31vw / 19.2);
	}
	.products-block .tab-area .tab.num-4 .txt {
    padding-right: calc(26vw / 19.2);
	}
	.products-block .panel-area {
		padding: calc(80vw / 19.2) 0 calc(75vw / 19.2);
		height: calc(780vw / 19.2);
	}
	.products-block .panel .products-img {
		width: calc(405vw / 19.2);
		margin: 0 auto calc(65vw / 19.2);
	}
	.products-block .products-name {
		font-size: calc(18vw / 19.2);
		margin-bottom: calc(15vw / 19.2);
	}
	.products-block .num-4 .products-name:nth-of-type(2) {
		font-size: calc(15vw / 19.2);
	}
	.products-block .products-price {
		font-size: calc(15vw / 19.2);
	}
	.products-block .products-price .tax {
		font-size: calc(10vw / 19.2);
	}
	.products-block .tab-area .tab.num-1 .txt {
		padding-left: calc(19vw / 19.2);
	}
	.products-block .tab-area .tab.adjust-2.num-3 .txt {
		padding-left: calc(35vw / 19.2);
	}
	.products-block .tab-area .tab.active.num-3 .txt {
		padding-right: calc(22vw / 19.2);
	}
	.products-block {
		padding-bottom: calc(108vw / 19.2);
	}
	.products-block #products-modal {
		height: calc(330vw / 19.2);
	}
	.products-block #products-modal .close {
    bottom: calc(22vw / 19.2);
		width: calc(25vw / 19.2);
	}
	.products-block .modal-contents {
		padding: calc(40vw / 19.2) calc(20vw / 19.2) 0;
	}
	.products-block .modal-contents .common-btn {
		width: calc(50% - calc(20vw / 19.2));
		margin: 0 calc(10vw / 19.2) calc(20vw / 19.2);
	}
	.products-block .modal-contents .common-btn:last-child {
		margin: 0 calc(10vw / 19.2);
	}
	.products-block .modal-contents .common-btn .btn {
		height: calc(60vw / 19.2);
		font-size: calc(20vw / 19.2);
	}
	.products-block .modal-contents .common-btn .btn .arrow {
		width: calc(25vw / 19.2);
		height: calc(25vw / 19.2);
	}
	.products-block .common-btn.modal-btn {
		margin-top: calc(60vw / 19.2);
	}
	.products-block .common-btn.modal-btn .btn:hover .arrow {
		right: calc(30vw / 19.2);
	}
}

/* -----------------------------------
FEATURES
----------------------------------- */
.features-block {
	background-color: #cadff4;
}
.features-block .heading {
	padding-top: calc(150vw / 8.28);
}
.features-block .features-bg-lazy {
  position: relative;
  overflow: hidden;
}
.features-block .features-bg-lazy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: none; /* 初期状態：非表示 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  clip-path: inset(0 100% 100% 0); /* 左上の1点だけ表示 */
  transition: clip-path 1.5s ease-out;
  z-index: 0;
}
.features-block .features-bg-lazy.loaded::before {
  clip-path: inset(0 0 0 0); /* 全体を表示する */
}
.features-block .content {
	margin-top: calc(122vw / 8.28);
	padding-bottom: calc(130vw / 8.28);
	position: relative;
}
.features-block .ttl-wrap {
	text-align: center;
	font-weight: 700;
	color: #00559e;
}
.features-block .btl-image {
	position: absolute;
	z-index: 1;
}
.features-block .btl-shadow {
	position: absolute;
}
.features-block .btl-1 .btl-image,
.features-block .btl-1 .btl-shadow {
	width: calc(237vw / 8.28);
	top: calc(187vw / 8.28);
}
.features-block .btl-1 .btl-image {
	left: calc(48vw / 8.28);
}
.features-block .btl-1 .btl-shadow {
	left: calc(40vw / 8.28);
}
.features-block .btl-2 .btl-image,
.features-block .btl-2 .btl-shadow {
	width: calc(276vw / 8.28);
	top: calc(383vw / 8.28);
}
.features-block .btl-2 .btl-image {
	left: calc(134vw / 8.28);
}
.features-block .btl-2 .btl-shadow {
	left: calc(134vw / 8.28);
	transition-delay: 1.4s;
}
.features-block .btl-3 .btl-image,
.features-block .btl-3 .btl-shadow {
	width: calc(390vw / 8.28);
	top: calc(678vw / 8.28);
}
.features-block .btl-3 .btl-image {
	left: calc(507vw / 8.28);
}
.features-block .btl-3 .btl-shadow {
	left: calc(520vw / 8.28);
	transform: translateX(-1vw);
	transition-delay: 1.6s;
}
.features-block .btl-shadow {
	opacity: 0;
	transform: translateX(1vw);
	transition: all 1.2s 1.2s ease-out;
}
.features-block .btl-shadow.is-inview {
	opacity: 1;
}
.features-block .btl-2 .btl-shadow.is-inview {
	opacity: 0;
  animation: shadow-in .5s 1.5s ease-out forwards;
}
@keyframes shadow-in {
  0% {
    transform: translateX(-3%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.features-block .quote {
	font-size: calc(34vw / 8.28);
	letter-spacing: 0.08em;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: stretch;
	margin-bottom: calc(20vw / 8.28);
}
.features-block .quote .txt {
	flex: 0 0 auto;
}
.features-block .quote::before,
.features-block .quote::after {
	content: "";
	flex: 0 0 1px;
	height: auto;
	margin: 0 calc(32vw / 8.28);
	background: #00559e;
}
.features-block .quote::after {
	margin: 0 calc(22vw / 8.28);
}
.features-block .quote::before {
	transform: rotate( -30deg )
}
.features-block .quote::after {
	transform: rotate( 30deg )
}
.features-block .ttl {
	font-size: calc(70vw / 8.28);
	letter-spacing: 0.03em;
}
.features-block .ttl sup {
	top: 1em;
}
.features-block .point-wrap {
	margin: 0 calc(32vw / 8.28) calc(70vw / 8.28) calc(47vw / 8.28);
}
.features-block .point-left {
	margin-left: auto;
	width: calc(356vw / 8.28);
}
.features-block .point.num-1 {
	width: calc(347vw / 8.28);
	margin-top: calc(110vw / 8.28);
}
.features-block .point.num-2,
.features-block .point.num-4 {
	margin-top: calc(75vw / 8.28);
}
.features-block .point-right {
	margin-top: calc(275vw / 8.28);
}
.features-block .point-wrap .txt {
	font-size: calc(28vw / 8.28);
	letter-spacing: 0.055em;
	line-height: 1.6;
	font-weight: bold;
	position: relative;
	padding-left: calc(48vw / 8.28);
}
.features-block .point.num-2 .txt.num-1 {
	margin-bottom: calc(15vw / 8.28);
}
.features-block .point.num-2 .txt.num-2 {
	line-height: .5;
}
.features-block .point.num-2 .txt .catch {
	position: relative;
	padding: 0 calc(8vw / 8.28);
}
.features-block .point.num-2 .txt.num-2 span:nth-of-type(3) {
	padding-right: calc(20vw / 8.28);
	margin-right: calc(5vw / 8.28);
}
.features-block .point.num-2 .txt .catch::before,
.features-block .point.num-2 .txt .catch::after {
	content: '';
	width: calc(10vw / 8.28);
	height: calc(15vw / 8.28);
	position: absolute;
}
.features-block .point.num-2 .txt .catch::before {
	border-left: solid 2px #00559e;
	border-top: solid 2px #00559e;
	top: 0;
	left: 0;
}
.features-block .point.num-2 .txt .catch::after {
	border-right: solid 2px #00559e;
	border-bottom: solid 2px #00559e;
	bottom: 0;
	right: 0;
}
.features-block .point-wrap .txt.num-1::before {
	position: absolute;
	content: "";
	background-image: url(../img/top/sp/component_check.svg);
	width: calc(38vw / 8.28);
	height: calc(32vw / 8.28);
	top: 0;
	left: 0;
}
.features-block .num-4 .txt::before {
	margin-top: calc(30vw / 8.28);
}
.features-block .txt .catch {
	font-size: calc(50vw / 8.28);
	color: #ed7fa4;
}
.features-block .txt .catch .and {
	font-size: calc(28vw / 8.28);
}
.features-block .content .cap {
	width: calc(520vw / 8.28);
	line-height: 1.2;
	color: #00559e;
	margin: 0 calc(47vw / 8.28);
}
.features-block .point.num-2 {
	width: calc(356vw / 8.28);
}
.features-block .point.num-3 {
	width: calc(460vw / 8.28);
}
.features-block .point.num-4 {
	width: calc(468vw / 8.28);
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.features-block .content {
		margin-top: calc(90vw / 19.2);
		padding-bottom: calc(50vw / 19.2);
	}
	.features-block .heading {
		padding-top: calc(120vw / 19.2);
	}
	.features-block .quote {
		font-size: calc(26vw / 19.2);
		margin-bottom: calc(20vw / 19.2);
	}
	.features-block .quote::before {
    margin: 0 calc(22vw / 19.2);
	}
	.features-block .quote::after {
		margin: 0 calc(14vw / 19.2);
	}
	.features-block .ttl {
    font-size: calc(52vw / 19.2);
	}
	.features-block .ttl sup {
    top: .8em;
	}
	.features-block .point.num-1 {
    width: calc(275vw / 19.2);
    margin-top: calc(86vw / 19.2);
	}
	.features-block .point.num-2 {
    width: calc(280vw / 19.2);
	}
	.features-block .point.num-3 {
    width: calc(364vw / 19.2);
	}
	.features-block .point.num-4 {
    width: calc(358vw / 19.2);
	}
	.features-block .point-left {
		width: calc(280vw / 19.2);
	}
	.features-block .point-wrap {
		margin: 0 calc(26vw / 19.2) calc(50vw / 19.2) calc(36vw / 19.2);
	}
	.features-block .point.num-2,
	.features-block .point.num-4 {
    margin-top: calc(58vw / 19.2);
	}
	.features-block .content .cap {
		width: calc(400vw / 19.2);
		margin: 0 calc(36vw / 19.2);
	}
	.features-block .btl-1 .btl-image,
	.features-block .btl-1 .btl-shadow  {
		width: calc(185vw / 19.2);
		top: calc(148vw / 19.2);
	}
	.features-block .btl-2 .btl-image,
	.features-block .btl-2 .btl-shadow  {
		width: calc(213vw / 19.2);
		top: calc(300vw / 19.2);
	}
	.features-block .btl-3 .btl-image,
	.features-block .btl-3 .btl-shadow  {
		width: calc(300vw / 19.2);
		top: calc(524vw / 19.2);
	}
	.features-block .btl-1 .btl-image {
		left: calc(36vw / 19.2);
	}
	.features-block .btl-2 .btl-image {
		left: calc(102vw / 19.2);
	}
	.features-block .btl-3 .btl-image {
		left: calc(392vw / 19.2);
	}
	.features-block .btl-1 .btl-shadow {
    left: calc(17vw / 19.2);
	}
	.features-block .btl-2 .btl-shadow {
    left: calc(102vw / 19.2);
	}
	.features-block .btl-3 .btl-shadow {
    left: calc(415vw / 19.2);
	}
	.features-block .point-right {
		margin-top: calc(206vw / 19.2);
	}
}
/* -----------------------------------
INSTAGRAM
----------------------------------- */
.instagram-block {
	margin-top: calc(220vw / 8.28);
}
.instagram-block .instagram-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: calc(118vw / 8.28);
}
.instagram-block .instagram-list .instagram-item:not(:nth-of-type(n+4)) {
	margin-bottom: calc(20vw / 8.28);
}
.instagram-block .instagram-list .instagram-item{
	width: calc(262vw / 8.28);
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.instagram-block {
		margin-top: calc(170vw / 19.2);
	}
	.instagram-block .instagram-list {
		margin-top: calc(90vw / 19.2);
	}
	.instagram-block .instagram-list .instagram-item{
		width: calc(204vw / 19.2);
	}
}

/* -----------------------------------
TOPICS
----------------------------------- */
.topics-block {
	margin-top: calc(220vw / 8.28);
}
.topics-block .topics-inner {
	overflow: hidden;
}
.topics-block .topics-slider-slide {
	color: #fff;
	padding: calc(53vw / 8.28) calc(34vw / 8.28) calc(40vw / 8.28);
}
.topics-block .topics-slider-slide:nth-child(odd) {
	background-color: #00559e;
}
.topics-block .topics-slider-slide:nth-child(even) {
	background-color: #ed7fa4;
}
.topics-block .topics-date {
	font-size: calc(23vw / 8.28);
	letter-spacing: 0.1em;
	margin: calc(17vw / 8.28) 0 calc(15vw / 8.28);
	display: block;
}
.topics-block .txt-wrap {
	margin: 0 calc(20vw / 8.28);
}
.topics-block .topics-slider-slide a {
	display: block;
}
.topics-block .topics-text {
	font-size: calc(25vw / 8.28);
	line-height: 1.48;
}
.topics-block .topics-arrow:after {
	background: url(../img/top/sp/topics_slider_arrow.svg) no-repeat;
	background-size: contain;
	background-position: center;
}
.topics-block .topics-arrow {
	top: 48%;
	width: calc(60vw / 8.28);
	height: calc(10vw / 8.28);
	transition: 500ms;
}
.topics-block .swiper-button-next.topics-arrow {
	left: calc(50vw / 8.28);
	right: auto;
}
.topics-block .swiper-button-next.topics-arrow:after {
	transform: scale(1, 1);
}
.topics-block .swiper-button-prev.topics-arrow {
	left: auto;
	right: calc(50vw / 8.28);
}
.topics-block .swiper-button-prev.topics-arrow:after {
	transform: scale(-1, 1);
}
.topics-block .swiper-button-next.topics-arrow:after,
.topics-block .swiper-button-prev.topics-arrow:after {
	width: 100%;
	height: 100%;
	content: "";
}
.topics-block .swiper-button-prev.topics-arrow.invisible-arrow,
.topics-block .swiper-button-next.topics-arrow.invisible-arrow {
	opacity: 0;
	pointer-events: none;
	transition: 500ms;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
	opacity: 1;
}
.topics-block .swiper-pagination.topics-pagination .swiper-pagination-bullet {
	margin: 0 calc(15vw / 8.28);
	width: calc(15vw / 8.28);
	height: calc(15vw / 8.28);
}
.topics-block .swiper-pagination-bullet-active {
	background: #00559e;
}
.topics-block  .swiper-wrapper {
	z-index: 20;
}
.topics-block .swiper-button-prev {
	display: none;
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.topics-block {
		margin-top: calc(170vw / 19.2);
	}
	.topics-block	.topics-slider {
		margin: 0 auto 0 0;
		width: calc(440vw / 19.2);
		overflow: visible;
		margin-left: calc(100vw / 19.2);
	}
	.topics-block .topics-slider-slide {
		width: calc(440vw / 19.2);
		margin-right: calc(20vw / 19.2);
		padding: calc(40vw / 19.2) calc(25vw / 19.2) calc(30vw / 19.2);
	}
	.topics-block .topics-slider-slide:last-of-type {
		margin-right: 0;
	}
	.topics-block	.topics-slider-slide a img {
		transition: 400ms;
	}
	.topics-block	.topics-image {
		width: 100%;
	}
	.topics-block .topics-date {
		font-size: calc(14vw / 19.2);
		margin: calc(12vw / 19.2) 0 calc(8vw / 19.2)
	}
	.topics-block .txt-wrap {
    margin: 0 calc(14vw / 19.2);
	}
	.topics-block .topics-text {
		font-size: calc(18vw / 19.2);
		line-height: 1.7;
		letter-spacing: -.04em;
	}
	.topics-block .topics-arrow {
		top: 45%;
		width: calc(50vw / 19.2);
		height: calc(15vw / 19.2);
		transition: 500ms;
	}
	.topics-block .swiper-button-prev.topics-arrow {
		left: auto;
		right: calc(-80vw / 19.2);
	}
	.topics-block .swiper-button-prev.topics-arrow:after {
		width: 100%;
		height: 100%;
		transform: scale(-1, 1);
	}
	.topics-block .swiper-button-next.topics-arrow {
		left: calc(-80vw / 19.2);
		right: auto;
	}
	.topics-block .swiper-button-next.topics-arrow:after {
		width: 100%;
		height: 100%;
		transform: scale(1, 1);
	}
	.topics-block .swiper-pagination.topics-pagination .swiper-pagination-bullet {
		margin: 0 calc(10vw / 19.2);
		width: calc(12vw / 19.2);
		height: calc(12vw / 19.2);
	}
	/* 最後から2番目調整 */
	/* .topics-slider-slide:nth-last-of-type(3) {
		margin-right: 0;
	}
	.topics-slider-slide:nth-last-of-type(2) {
		padding-left: 3vw;
		width: 25.46vw;
	} */
}

/* -----------------------------------
NEWS
----------------------------------- */
.news-block {
	margin-top: calc(220vw / 8.28);
}
.news-block .news-inner {
	width: calc(724vw / 8.28);
	margin: 0 auto;
}
.news-block .news-wrap {
	border-top: solid 1px #003165;
	border-bottom: solid 1px #003165;
}
.news-block .news-inner .news-list:not(:last-child) {
	border-bottom: solid 1px #003165;
}
body#glossy .news-block .news-wrap {
	border-top: solid 1px #005062;
	border-bottom: solid 1px #005062;
}
body#glossy .news-block .news-inner .news-list:not(:last-child) {
	border-bottom: solid 1px #005062;
}
.news-block .news-list {
	padding: calc(40vw / 8.28) 0;
	font-weight: 700;
}
.news-block .news-list .date {
	font-size: calc(27vw / 8.28);
	letter-spacing: 0.1em;
	margin-bottom: calc(10vw / 8.28);
	display: block;
}
.news-block .news-list .ttl {
	font-size: calc(27vw / 8.28);
	letter-spacing: -0.005em;
	line-height: 1.3;
}
.news-block .news-more {
	width: calc(101vw / 8.28);
	margin-top: calc(55vw / 8.28);
	margin-left: auto;
	transition: 500ms;
}
.news-block .news-more .arrow {
	width: calc(101vw / 8.28);
	height: calc(101vw / 8.28);
	transition: 500ms;
}
.news-block .news-more a:hover .arrow {
	margin-left: calc(20vw / 8.28);
}
.news-block .news-more .arrow .path {
	fill: #003165;
	transition: 500ms;
}
.news-block .news-more a:hover .arrow .path {
	fill: #ed7fa4;
}
body#glossy .news-block .news-more .arrow .path {
	fill: #005062;
}
body#glossy .news-block .news-more a:hover .arrow .path {
	fill: #ef811e;
}

.news-block .hover-multiline {
	background-image: linear-gradient(90deg, rgba(3, 49, 101), rgba(3, 49, 101));
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.news-block {
		margin-top: calc(170vw / 19.2);
	}
	.news-block .news-inner {
    width: calc(440vw / 19.2);
		margin-top: calc(90vw / 19.2);
	}
	.news-block .news-list .date {
		font-size: calc(14vw / 19.2);
		margin-bottom: calc(10vw / 19.2);
	}
	.news-block .news-list .ttl {
		font-size: calc(18vw / 19.2);
	}
	.news-block .news-list {
		padding: calc(35vw / 19.2) 0;
	}
	.news-block .news-more {
		width: calc(78vw / 19.2);
		margin-top: calc(42vw / 19.2);
	}
	.news-block .news-more .arrow {
		width: calc(78vw / 19.2);
		height: calc(78vw / 19.2);
	}
	.news-block .news-more a:hover .arrow {
		margin-left: calc(10vw / 19.2);
	}
}

/* -----------------------------------
SHOP LIST
----------------------------------- */
.shoplist-block {
	margin: calc(220vw / 8.28) 0 calc(439vw / 8.28);
}
.shoplist-block .shoplist-image{
	width: calc(724vw / 8.28);
	margin: 0 auto;
}
.shoplist-block .common-btn::after {
	background-image: url(../img/top/sp/news_arrow_off.svg);
}
.shoplist-block .shoplist-img {
	margin-bottom: calc(48vw / 8.28);
}

/*-- PC --------*/
@media screen and (min-width: 769px) {
	.shoplist-block {
		margin: calc(170vw / 19.2) 0 0;
		padding-bottom: calc(175vw / 19.2);
	}
	.shoplist-block .shoplist-image {
		width: calc(560vw / 19.2);
	}
	.shoplist-block .shoplist-img {
		margin-bottom: calc(38vw / 19.2);
	}
}

/*----------------------------------------
PopUp Banner
----------------------------------------*/
.popup {
	display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s cubic-bezier(0.33, 1, 0.68, 1);
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}
.popup-on .popup {
	opacity: 1;
  pointer-events: auto;
}
.popup-inner {
	transform: scale(0.95);
	opacity: 0;
	transition: transform 0.1s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.1s cubic-bezier(0.33, 1, 0.68, 1);
}
.popup-on .popup .popup-inner {
	position: relative;
	z-index: 2;
	transform: scale(1);
	opacity: 1;
}

.popup-on .popup .popup-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .8);
	z-index: 1;
	overflow: hidden;
}
.popup-on .popup .popup-btn-close {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: calc(50vw / 8.28) auto 0;
	height: calc(70vw / 8.28);
	width: calc(160vw / 8.28);
	background: #ddd;
	font-size: calc(26vw / 8.28);
	text-align: center;
	letter-spacing: .05em;
	color: #504f4f;
	transition: 200ms;
	cursor: pointer;
	opacity: .7;
}
.popup-on .popup .txt-area {
	color: #fff;
	text-align: center;
	margin-bottom: calc(30vw / 8.28);
}
.popup-on .popup .txt {
	font-size: calc(33vw / 8.28);
	font-weight: 600;
	line-height: 1.5;
}
.popup-on .popup .popup-image {
	margin: 0 auto calc(30vw / 8.28);
	width: 85%;
	max-width: 540px;
}
.popup-on .popup .btn-wrap {
	display: flex;
	justify-content: center;
	margin: 0 calc(15vw / 8.28);
}
.popup-on .popup .btn-wrap .btn-area {
	text-align: center;
	margin: 0 calc(15vw / 8.28);
}
.popup-on .popup .common-btn .btn {
	font-size: calc(26vw / 8.28);
	font-weight: 400;
	width: calc(350vw / 8.28);
	height: calc(80vw / 8.28);
}
.popup-on .popup .common-btn .btn .arrow {
	width: calc(36vw / 8.28);
	height: calc(36vw / 8.28);
}
.popup-on .popup .btn-wrap .txt-area {
	display: inline-block;
	position: relative;
	padding-left: calc(50vw / 8.28);
}
.popup-on .popup .btn-wrap .txt-area::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 1vw;
	left: 0;
	width: 4.5vw;
	height: 4.5vw;
}
.popup-on .popup .btn-wrap .txt-area.insta::before {
	background: url(../img/common/sns_instagram_on.png) no-repeat;
	background-size: contain;
}
.popup-on .popup .btn-wrap .txt-area.x::before {
	background: url(../img/common/sns_x_w.png) no-repeat;
	background-size: contain;
}
.popup-on .popup .btn-area .txt {
	font-size: calc(26vw / 8.28);
	vertical-align: middle;
	line-height: 1;
}
.popup-on .popup .btn-wrap .common-btn .hover-line {
	padding-top: calc(5vw / 8.28);
	display: block;
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	.popup-on .popup .popup-bg {
		background: rgba(0, 0, 0, .6);
	}
	.popup-on .popup .popup-image {
		width: auto;
		max-width: 500px;
		height: 73vh;
		max-height: 500px;
		min-height: 240px;
	}
	.popup-on .popup .popup-btn-close {
		font-size: calc(14vw / 19.2);
		margin: calc(30vw / 19.2) auto 0;
		height: calc(30vw / 19.2);
    width: calc(110vw / 19.2);
	}
	.popup-on .popup .popup-btn-close:hover {
		opacity: .6;
		transition: 200ms;
	}
	.popup-on .popup .txt {
		font-size: calc(28vw / 19.2);
	}
	.popup-on .popup .common-btn .btn {
		font-size: calc(23vw / 19.2);
		width: calc(420vw / 19.2);
		height: calc(76vw / 19.2);
	}
	.popup-on .popup .btn-wrap .common-btn .hover-line {
		padding-top: calc(2vw / 19.2);
	}
	.popup-on .popup .btn-area .txt {
		font-size: calc(23vw / 19.2);
	}
	.popup-on .popup .btn-wrap .txt-area::before {
		width: 2vw;
		height: 2vw;
	}
	.popup-on .popup .btn-wrap .txt-area {
		margin-bottom: calc(10vw / 8.28);
		padding-left: calc(20vw / 8.28);
	}
	.popup-on .popup .btn-wrap .txt-area::before {
		top: -.4vw;
	}
	.popup-on .popup .txt-area {
		margin-bottom: calc(10vw / 8.28);
	}
	.popup-on .popup .popup-image {
    margin: 0 auto calc(15vw / 8.28);
	}
	.popup-on .popup .common-btn .btn .arrow {
		width: calc(30vw / 19.2);
		height: calc(30vw / 19.2);
	}
}

/****************************************
glossy series
 ****************************************/

/* -----------------------------------
MV
----------------------------------- */
#glossy .mv-wrap {
	background-image: url(../img/top/sp/glossy/mv_bg.png);
}
#glossy .mv-block {
	margin-bottom: calc(58vw / 8.28);
	position: relative;
}
#glossy .mv-block .top-wrap {
	position: relative;
	padding-bottom: calc(154vw / 8.28);
	/* z-index: 1; */
	z-index: 4;
}
#glossy .mv-block .star {
	position: relative;
	z-index: 1;
	opacity: 0;
	transition: opacity .5s ease-in-out;
}
#glossy .mv-block .star.star-s {
	width: calc(35vw / 8.28);
	margin-left: calc(455vw / 8.28);
}
#glossy .mv-block .star.star-m {
	width: calc(57vw / 8.28);
	margin: calc(-25vw / 8.28) 0 0 calc(404vw / 8.28);
}
#glossy .mv-block .star.star-s.is-show {
	animation-delay: 2s;
}
#glossy .mv-block .star.star-m.is-show {
	animation-delay: 1.5s;
}
#glossy .mv-block .star.is-show {
	opacity: 1;
}
#glossy .mv-block .top-wrap .phrase-wrap {
	position: absolute;
	top: calc(74vw / 8.28);
	padding-top: 0;
	overflow: visible;
	z-index: 3;
}
#glossy .mv-block .phrase.num-1 {
	margin-top: calc(-26vw / 8.28);
}
#glossy .mv-decor.num-1 {
	width: calc(195vw / 8.28);
	top: calc(475vw / 8.28);
	left: calc(223vw / 8.28);
	animation-delay: 1s;
}
#glossy .mv-block .product-tr {
	top: calc(440vw / 8.28);
}
#glossy .mv-block .product-tr.tr-top {
	z-index: 4;
}
#glossy .bottom-wrap {
	position: relative;
	z-index: 2;
}
#glossy .mv-block .product-sh {
	top: calc(684vw / 8.28);
	z-index: 2;
}
#glossy .mv-decor.num-2 {
	width: calc(38vw / 8.28);
	top: calc(136vw / 8.28);
	left: calc(680vw / 8.28);
	animation-delay: 4.3s;
}
#glossy .mv-decor.num-3 {
	width: calc(74vw / 8.28);
	top: calc(164vw / 8.28);
	left: calc(599vw / 8.28);
	animation-delay: 3.8s;
}
#glossy .mv-block .aiming {
	position: absolute;
	opacity: 0;
	width: calc(271vw / 8.28);
	top: 0;
  left: 0;
  animation: zigzag 2s linear 1s forwards;
}
@keyframes zigzag {
  0% {
    transform: translate(calc(-200vw / 8.28), calc(500vw / 8.28));
    opacity: 1;
  }
  50% {
    transform: translate(calc(900vw / 8.28), calc(700vw / 8.28));
    opacity: 1;
  }
  100% {
    transform: translate(calc(348vw / 8.28), calc(1023vw / 8.28));
    opacity: 1;
  }
}
#glossy .mv-block .aiming-fit {
	position: absolute;
	opacity: 0;
	width: calc(327vw / 8.28);
	top: calc(995vw / 8.28);
  left: calc(320vw / 8.28);
	animation-delay: 3s;
}
#glossy .mv-block .aiming-fit.is-show {
	opacity: 1;
}
#glossy .mv-block .aiming.forward,
#glossy .mv-block .aiming-fit.forward {
	z-index: 2;
}
#glossy .mv-block .bottom-txt {
	position: absolute;
	bottom: 0;
}
#glossy .mv-block .link-wrap {
	align-items: flex-end;
}
#glossy .mv-block .cap {
	color: #fff;
	text-align: right;
	margin: calc(30vw / 8.28) calc(60vw / 8.28) 0 0;
}
#glossy .mv-block .link-wrap .hop-area {
	margin-top: calc(-10vw / 8.28);
	padding-top: calc(10vw / 8.28);
}
#glossy .mv-block .hop-wrap.finger {
	width: calc(194vw / 8.28);
	margin-left: calc(30vw / 8.28);
	margin-bottom: calc(15vw / 8.28);
	opacity: 0;
	visibility: hidden;
	transition: 500ms;
}
#glossy .mv-block .hop-wrap.finger:hover {
	margin-left: calc(50vw / 8.28);
}
#glossy .mv-block .link-wrap .txt {
	letter-spacing: 0.025em;
}
#glossy .mv-block .hop-wrap.first .txt {
	font-size: calc(155vw / 8.28);
	-webkit-text-stroke: 1px #fff;
	color: #00999a;
	line-height: 0.75;
}
#glossy .mv-block .hop-wrap.first.is-inview .txt:nth-child(1) {
	animation-delay: 0.2s;
}
#glossy .mv-block .hop-wrap.first.is-inview .txt:nth-child(2) {
	animation-delay: 0.4s;
}
#glossy .mv-block .hop-wrap.first.is-inview .txt:nth-child(3) {
	animation-delay: 0.6s;
}
#glossy .mv-block .hop-wrap.second.is-inview .txt:nth-child(1) {
	animation-delay: 1s;
}
#glossy .mv-block .hop-wrap.second.is-inview .txt:nth-child(2) {
	animation-delay: 1.2s;
}
#glossy .mv-block .hop-wrap.second.is-inview .txt:nth-child(3) {
	animation-delay: 1.4s;
}
#glossy .mv-block .hop-wrap.second.is-inview .txt:nth-child(4) {
	animation-delay: 1.6s;
}
#glossy .mv-block .hop-wrap.second.is-inview .txt:nth-child(5) {
	animation-delay: 1.8s;
}
#glossy .mv-block .hop-wrap.second.is-inview .txt:nth-child(6) {
	animation-delay: 2s;
}
#glossy .mv-block .hop-wrap.first .hop-area {
	margin: initial;
	padding-top: calc(30vw / 8.28);
}
@keyframes hop-finger {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#glossy .mv-block .hop-wrap.finger.is-inview {
	animation: hop-finger 0.5s ease-out forwards;
	visibility: visible;
}
#glossy .mv-block .hop-wrap.finger img {
  opacity: 0;
}
#glossy .mv-block .hop-wrap.finger.is-inview img {
	opacity: 1;
}
#glossy .mv-decor {
	position: absolute;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
#glossy .mv-decor.is-show {
	opacity: 1;
}
#glossy .mv-block .link-wrap .hop-wrap {
	visibility: hidden;
}
#glossy .mv-block .hop-wrap.is-inview,
#glossy .mv-block .hop-wrap.is-inview .hop-area {
  visibility: visible;
}
#glossy .mv-block .hop-wrap.is-inview .txt {
  opacity: 0;
  animation: textanimation 0.8s ease-out forwards;
}

/*-- PC --------*/
@media screen and (min-width: 769px) {
	#glossy .mv-block {
		margin-bottom: calc(44vw / 19.2);
	}
	#glossy .mv-block .top-wrap {
		padding-bottom: calc(120vw / 19.2);
	}
	#glossy .mv-block .top-wrap .phrase-wrap {
		top: calc(58vw / 19.2);
	}
	#glossy .mv-decor.num-1 {
		width: calc(154vw / 19.2);
		top: calc(366vw / 19.2);
    left: calc(170vw / 19.2);
	}
	#glossy .mv-decor.num-2 {
		width: calc(30vw / 19.2);
		top: calc(108vw / 19.2);
    left: calc(525vw / 19.2);
		animation-delay: 5s;
	}
	#glossy .mv-decor.num-3 {
		width: calc(56vw / 19.2);
		top: calc(130vw / 19.2);
    left: calc(462vw / 19.2);
		animation-delay: 4.5s;
	}
	#glossy .mv-block .product-tr {
		top: calc(340vw / 19.2);
	}
	#glossy .mv-block .link-wrap {
		margin-top: 0;
	}
	#glossy .mv-block .star.star-m {
    width: calc(48vw / 19.2);
		margin: calc(-20vw / 19.2) 0 0 calc(306vw / 19.2);
	}
	#glossy .mv-block .star.star-s {
    width: calc(30vw / 19.2);
    margin-left: calc(348vw / 19.2);
	}
	#glossy .mv-block .phrase.num-1 {
		margin-top: calc(-22vw / 19.2);
	}
	#glossy .mv-block .link-wrap .hop-area {
		margin-top: calc(-10vw /19.2);
		padding-top: calc(5vw / 19.2);
	}
	#glossy .mv-block .hop-wrap.finger {
		width: calc(150vw / 19.2);
		margin-left: calc(25vw / 19.2);
		margin-bottom: calc(10vw / 19.2);
	}
	#glossy .mv-block .hop-wrap.finger:hover {
		margin-left: calc(35vw / 19.2);
	}
	#glossy .mv-block .product-sh {
		top: calc(535vw / 19.2);
	}
	#glossy .mv-block .cap {
		margin: calc(20vw / 19.2) calc(40vw / 19.2) 0 0;
	}
	#glossy .mv-block .hop-wrap.first .hop-area {
		padding-top: calc(40vw / 19.2);
	}
	#glossy .mv-block .hop-wrap.first .txt {
		font-size: calc(120vw / 19.2)
	}
	#glossy .mv-block .aiming {
		width: calc(211vw / 19.2);
		animation-duration: 2.5s;
	}
	#glossy .mv-block .aiming-fit {
		width: calc(253vw / 19.2);
		top: calc(770vw / 19.2);
		left: calc(254vw / 19.2);
		animation-delay: 3.5s;
	}
	@keyframes zigzag {
		0% {
			transform: translate(calc(-200vw / 19.2), calc(300vw / 19.2));
			opacity: 1;
		}
		50% {
			transform: translate(calc(700vw / 19.2), calc(500vw / 19.2));
			opacity: 1;
		}
		100% {
			transform: translate(calc(276vw / 19.2), calc(792vw / 19.2));
			opacity: 1;
		}
	}
}

/* -----------------------------------
MV SECONDARY
----------------------------------- */
#glossy .mv-secondary .phrase-01 {
	width: calc(483vw / 8.28);
	margin-left: calc(52vw / 8.28);
	position: relative;
}
#glossy .mv-secondary .phrase-02 {
	width: calc(757vw / 8.28);
	margin: calc(-72vw / 8.28) auto 0;
	padding-bottom: calc(240vw / 8.28);
	position: relative;
}
#glossy .mv-secondary .img-wrap {
	margin-top: calc(-140vw / 8.28)
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	#glossy .mv-secondary .img-wrap {
		margin-top: calc(-108vw / 19.2)
	}
	#glossy .mv-secondary .phrase-01 {
		width: calc(374vw / 19.2);
		margin-left: calc(38vw / 19.2);
	}
	#glossy .mv-secondary .phrase-02 {
		width: calc(586vw / 19.2);
		margin: calc(-76vw / 19.2) 0 0 calc(24vw / 19.2);
		padding-bottom: calc(196vw / 19.2);
	}
}

/* -----------------------------------
CONCEPT
----------------------------------- */
#glossy .concept-block .top .top-image {
  width: calc(544vw / 8.28);
}
#glossy .concept-block .top .description {
  top: calc(190vw / 8.28);
}
#glossy .concept-block .responsive-svg,
#glossy .concept-block .text-wrap {
	left: -7.647343%;
}
#glossy .concept-block .middle {
	margin: calc(70vw / 8.28) 0 calc(10vw / 8.28);
}
#glossy .concept-block .char {
	color: #ef811e;
}
#glossy .concept-block .bottom .bottom-image {
	width: calc(474vw / 8.28);
}
#glossy .concept-block .bottom .description {
	top: calc(150vw / 8.28);
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	#glossy .concept-block .top .top-image {
		width: calc(420vw / 19.2);
	}
	#glossy .concept-block .top .description {
		top: calc(156vw / 19.2);
	}
	#glossy .concept-block .responsive-svg,
	#glossy .concept-block .text-wrap {
		left: -8.647343%
	}
	#glossy .concept-block .middle {
		margin: calc(60vw / 19.2) 0 calc(10vw / 19.2);
	}
	#glossy .concept-block .bottom .bottom-image {
		width: calc(366vw / 19.2);
	}
	#glossy .concept-block .bottom .description {
		top: calc(120vw / 19.2);
	}
}

/* -----------------------------------
PRODUCT
----------------------------------- */
#glossy .products-block .vertical-txt .num-2 {
  width: calc(57vw / 8.28);
	margin-right: calc(4vw / 8.28);
}
#glossy .products-block .vertical-txt {
	right: calc(46vw / 8.28);
	left: auto;
}
#glossy .products-block .products-top .top-img {
	width: calc(659vw / 8.28);
	margin-right: auto;
	margin-left: 0;
}
#glossy .products-block .products-txt .cap {
	margin-right: auto;
}
#glossy .products-block .common-btn .btn,
#glossy .products-block .tab-area .tab .txt,
#glossy .features-block .ttl-wrap,
#glossy .features-block .content .cap {
	color: #00999a;
}
#glossy .products-block .common-btn .btn .arrow .path {
  fill: #00999a;
}
#glossy .products-block .panel-area,
#glossy .products-block .tab-area .tab.active {
	background-color: #fad9bc;
}
#glossy .products-block,
#glossy .topics-block .topics-slider-slide:nth-child(odd) {
	background-color: #00999a;
}
#glossy .products-block .tab-area .tab {
	border: 2px solid #00999a;
}
#glossy .products-block .tab-area .tab.num-4 {
  border-right: none;
}
#glossy .products-block .tab-area .tab.num-1 {
	border-left: none;
}
#glossy .products-block .tab-area .tab.active {
	border: none;
}
#glossy .products-block .tab-area .tab {
	border-bottom: none;
}
#glossy .products-block .hover-line::after {
	background-color: #00999a;
}
.products-block #products-modal .common-btn.modal-btn {
	margin-top: 0;
	cursor: pointer;
	position: relative;
}
.products-block #products-modal .common-btn .oilmilk-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(240vw / 8.28);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.products-block #products-modal .common-btn.is-open .oilmilk-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.products-block #products-modal .common-btn.modal-btn.is-open .oilmilk-btn a {
	background-color: #fff;
	border-radius: 40px;
	display: flex;
  align-items: center;
  justify-content: center;
	height: calc(60vw / 8.28);
	color: #00999a;
	font-size: calc(30vw / 8.28);
	font-family: "Overpass", sans-serif;
	font-weight: 800;
}
body#straight .products-block #products-modal .common-btn.modal-btn.is-open .oilmilk-btn a {
	color: #00559e;
}
.products-block #products-modal .common-btn.modal-btn.is-open .oilmilk-btn .milk {
	margin-top: calc(20vw / 8.28);
}
.products-block .common-btn.modal-btn.is-open .btn.action .arrow {
	transform: rotate(-90deg);
	right: calc(30vw / 8.28);
}
.products-block .common-btn.modal-btn .oilmilk-btn .btn .arrow {
	transition: 500ms;
}
.products-block .common-btn.modal-btn .oilmilk-btn .btn:hover .arrow {
	right: calc(20vw / 8.28);
	transform: translateY(-50%);
}
.oilmilk-btn .btn:hover .hover-line::after {
	width: 100%;
}
body#glossy .products-block .common-btn.modal-btn .oilmilk-btn .btn:hover .arrow .path {
	fill: #ef811e;
}
body#straight .products-block .common-btn.modal-btn .oilmilk-btn .btn:hover .arrow .path {
	fill: #ed7fa4;
}
.products-block .common-btn .btn .arrow {
  transform-origin: left center;
}
#products-modal .modal-contents.no-hover,
#products-modal .modal-contents.no-hover *,
.common-btn.no-hover,
.common-btn.no-hover * {
  pointer-events: none;
}
.common-btn.no-hover:hover {
  transform: none;
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	#glossy	.products-block .vertical-txt .num-1 {
		width: calc(108vw / 19.2);
	}
	#glossy .products-block .vertical-txt .num-2 {
		width: calc(46vw / 19.2);
	}
	#glossy .products-block .vertical-txt {
		right: calc(36vw / 19.2);
	}
	#glossy .products-block .products-top .top-img {
		width: calc(510vw / 19.2);
	}
	.products-block #products-modal .common-btn.modal-btn.is-open .oilmilk-btn,
	.products-block #products-modal .common-btn .oilmilk-btn {
		height: calc(170vw / 19.2);
	}
	.products-block #products-modal .common-btn.modal-btn.is-open .oilmilk-btn a {
		height: calc(45vw / 19.2);
		font-size: calc(20vw / 19.2);
	}
	.products-block #products-modal .common-btn.modal-btn.is-open .oilmilk-btn .milk {
		margin-top: calc(10vw / 19.2);
	}
	.products-block .common-btn.modal-btn .oilmilk-btn .btn:hover .arrow {
		right: calc(20vw / 19.2);
	}
	.products-block .common-btn.modal-btn.is-open .btn.action .arrow {
		right: calc(30vw / 19.2);
	}
}

/* -----------------------------------
FEATURES
----------------------------------- */
#glossy .features-block .point-right {
	margin-top: calc(206vw / 8.28);
}
#glossy .features-block .point.num-1 {
	width: calc(325vw / 8.28);
	margin-top: calc(70vw / 8.28);
}
#glossy .features-block .point.num-2 {
	width: calc(386vw / 8.28);
	margin-top: calc(46vw / 8.28);
}
#glossy .features-block .point.num-3 {
	width: calc(442vw / 8.28);
}
#glossy .features-block .point.num-4 {
	width: calc(460vw / 8.28);
	margin-top: calc(55vw / 8.28);
}
#glossy .features-block .ttl .ttl-s {
	font-size: calc(41vw / 8.28);
}
#glossy .features-block .point-left {
	width: calc(386vw / 8.28);
}
#glossy .features-block .point-wrap {
  margin: 0 calc(48vw / 8.28) calc(70vw / 8.28) calc(47vw / 8.28);
}
#glossy .features-block {
  background-color: #e5f5f5;
}
#glossy .features-block .quote::before,
#glossy .features-block .quote::after {
	background: #00999a;
}
#glossy .features-block .star-image {
	position: absolute;
	z-index: 2;
}
#glossy .features-block .star-image.is-inview {
	opacity: 0;
	transform: scale(0.5);
  transform-origin: center;
  animation: scaleUp 0.6s ease-out forwards;
}
@keyframes scaleUp {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#glossy .features-block .star-image.num-1 {
	width: calc(49vw / 8.28);
	top: calc(363vw / 8.28);
	left: calc(264vw / 8.28);
}
#glossy .features-block .star-image.num-2 {
	width: calc(62vw / 8.28);
	top: calc(599vw / 8.28);
	left: calc(46vw / 8.28);
}
#glossy .features-block .star-image.num-3 {
	width: calc(86vw / 8.28);
	top: calc(1108vw / 8.28);
	left: calc(446vw / 8.28);
}
#glossy .features-block .star-image {
	opacity: 0;
}
#glossy .features-block .star-image.is-inview {
	opacity: 1;
}
#glossy .features-block .features-bg-lazy::before {
	animation-duration: 6s;
}
#glossy .features-block .btl-1 .btl-image,
#glossy .features-block .btl-1 .btl-shadow {
	width: calc(126vw / 8.28);
}
#glossy .features-block .btl-2 .btl-image,
#glossy .features-block .btl-2 .btl-shadow {
	width: calc(155vw / 8.28);
}
#glossy .features-block .btl-3 .btl-image,
#glossy .features-block .btl-3 .btl-shadow {
	width: calc(202vw / 8.28);
}
#glossy .features-block .btl-4 .btl-image,
#glossy .features-block .btl-4 .btl-shadow {
	width: calc(352vw / 8.28);
}
#glossy .features-block .btl-1 .btl-image {
	top: calc(207vw / 8.28);
	left: calc(185vw / 8.28);
}
#glossy .features-block .btl-2 .btl-image {
	top: calc(296vw / 8.28);
	left: calc(14vw / 8.28);
}
#glossy .features-block .btl-3 .btl-image {
	top: calc(523vw / 8.28);
	left: calc(123vw / 8.28);
}
#glossy .features-block .btl-4 .btl-image {
	top: calc(786vw / 8.28);
	left: calc(505vw / 8.28);
}
#glossy .features-block .btl-1 .btl-shadow {
	top: calc(206vw / 8.28);
	left: calc(194vw / 8.28);
}
#glossy .features-block .btl-2 .btl-shadow {
	top: calc(310vw / 8.28);
	left: calc(40vw / 8.28);
}
#glossy .features-block .btl-3 .btl-shadow {
	top: calc(545vw / 8.28);
	left: calc(152vw / 8.28);
}
#glossy .features-block .btl-4 .btl-shadow {
	top: calc(804vw / 8.28);
	left: calc(540vw / 8.28);
	transition-delay: 1.8s;
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	#glossy .features-block .ttl {
		font-size: calc(52vw / 19.2);
	}
	#glossy .features-block .ttl .ttl-s {
    font-size: calc(36vw / 19.2);
	}
	#glossy .features-block .point.num-1 {
		width: calc(252vw / 19.2);
		margin-top: calc(50vw / 19.2);
	}
	#glossy .features-block .point.num-2 {
		width: calc(300vw / 19.2);
		margin-top: calc(35vw / 19.2);
	}
	#glossy .features-block .point.num-3 {
		width: calc(342vw / 19.2);
	}
	#glossy .features-block .point.num-4 {
		width: calc(356vw / 19.2);
		margin-top: calc(43vw / 19.2);
	}
	#glossy .features-block .point-wrap {
		margin: 0 calc(36vw / 19.2) calc(50vw / 19.2);
	}
	#glossy .features-block .point-left {
		width: calc(300vw / 19.2);
	}
	#glossy .features-block .point-right {
		width: calc(356vw / 19.2);
		margin-top: calc(160vw / 19.2);
	}
	#glossy .features-block .btl-1 .btl-image,
	#glossy .features-block .btl-1 .btl-shadow {
		width: calc(100vw / 19.2);
	}
	#glossy .features-block .btl-2 .btl-image,
	#glossy .features-block .btl-2 .btl-shadow {
		width: calc(122vw / 19.2);
	}
	#glossy .features-block .btl-3 .btl-image,
	#glossy .features-block .btl-3 .btl-shadow {
		width: calc(160vw / 19.2);
	}
	#glossy .features-block .btl-4 .btl-image,
	#glossy .features-block .btl-4 .btl-shadow {
		width: calc(278vw / 19.2);
	}
	#glossy .features-block .btl-1 .btl-image {
		top: calc(155vw / 19.2);
		left: calc(141vw / 19.2);
	}
	#glossy .features-block .btl-2 .btl-image {
		top: calc(224vw / 19.2);
		left: calc(11vw / 19.2);
	}
	#glossy .features-block .btl-3 .btl-image {
		top: calc(404vw / 19.2);
		left: calc(94vw / 19.2);
	}
	#glossy .features-block .btl-4 .btl-image {
		top: calc(607vw / 19.2);
		left: calc(387vw / 19.2);
	}
	#glossy .features-block .btl-1 .btl-shadow {
		top: calc(155vw / 19.2);
		left: calc(135vw / 19.2);
	}
	#glossy .features-block .btl-2 .btl-shadow {
		top: calc(234vw / 19.2);
		left: calc(30vw / 19.2);
	}
	#glossy .features-block .btl-3 .btl-shadow {
		top: calc(420vw / 19.2);
		left: calc(130vw / 19.2);
	}
	#glossy .features-block .btl-4 .btl-shadow {
		top: calc(618vw / 19.2);
		left: calc(402vw / 19.2);
	}
	#glossy .features-block .star-image.num-1 {
		width: calc(40vw / 19.2);
		top: calc(280vw / 19.2);
		left: calc(216vw / 19.2);
	}
	#glossy .features-block .star-image.num-2 {
		width: calc(48vw / 19.2);
		top: calc(466vw / 19.2);
		left: calc(38vw / 19.2);
	}
	#glossy .features-block .star-image.num-3 {
		width: calc(66vw / 19.2);
		top: calc(860vw / 19.2);
		left: calc(346vw / 19.2);
	}
}

/* -----------------------------------
SERIES banner
----------------------------------- */
.series-bnr {
	width: calc(728vw / 8.28);
	margin: calc(77vw / 8.28) auto 0;
	position: relative;
}
.series-bnr .arrow {
	width: calc(50vw / 8.28);
	height: calc(50vw / 8.28);
	position: absolute;
	bottom: calc(22vw / 8.28);
	right: calc(20vw / 8.28);
	transition: 500ms;
}
.series-bnr .arrow .path {
	fill: #fff;
}
.series-bnr:hover .arrow {
	right: calc(16vw / 8.28);
}

/*-- PC --------*/
@media screen and (min-width: 769px) {
	.series-bnr {
		width: calc(560vw / 19.2);
		margin: calc(60vw / 19.2) auto 0;
	}
	.series-bnr .arrow {
		width: calc(40vw / 19.2);
		height: calc(40vw / 19.2);
		position: absolute;
		bottom: calc(16vw / 19.2);
		right: calc(18vw / 19.2);
	}
	.series-bnr:hover .arrow {
		right: calc(12vw / 19.2);
	}
}