﻿@charset "UTF-8";

@media screen and (min-width: 768px) {

	body[data-type="RN2024"] main .inner {
		max-width: 1080px;
		position: relative;
		z-index: 1;
	}

	.products {
		padding: var(--px-100) 0 var(--px-140) 0;
	}

	.products .products_mv {
		margin: 0 0 var(--px-100) 0;
	}

	.products .products_mv img {
		max-width: 100%;
	}

	.products .products_desc {
		font-size: var(--px-16);
		line-height: 2.1875;
	}

	.products .products_list {
		margin: var(--px-120) 0 0 0;
	}

	.products .products_list li {
		display: flex;
		align-items: flex-start;
	}

	.products .products_list li:not(:last-child) {
		margin: 0 0 var(--px-230) 0;
	}

	.products .products_list li .products_list_img {
		width: var(--px-280);
		position: relative;
	}

	.products .products_list li .products_list_img img {
		width: 50%;
		height: auto;
		margin: 0 auto 0 0;
		position: relative;
		display: block;
		z-index: 1;
	}
	.products .products_list li .products_list_img[data-type="wide"] img {
		width: 74%;
	}

	.products .products_list li .products_list_img::after {
		content: "";
		display: block;
		aspect-ratio: 672/648;
		background-image: url('/en/brands/img/bottle_shadow.png');
		background-size: contain;
		background-repeat: no-repeat;
		width: 180%;
		height: auto;
		position: absolute;
		bottom: -50px;
		left: -65%;
	}

	.products .products_list li .products_list_info {
		width: calc(100% - var(--px-280));
	}

	.products .products_list li .products_list_info h2 {
		margin: 0 0 var(--px-12) 0;
	}

	.products .products_list li .products_list_info h2 span {
		font-size: var(--px-26);
		font-weight: 700;
	}

	.products .products_list li .products_list_info p.products_info {
		font-size: var(--px-19);
		margin: var(--px-20) 0 var(--px-28) 0;
	}

	.products .products_list li .products_list_info p.products_list_desc {
		font-size: var(--px-16);
		line-height: 2.1875;
	}

	.products .products_list li .products_list_info dl {
		margin: var(--px-40) 0 0 0;
	}

	.products .products_list li .products_list_info dl dt {
		margin: 0 0 var(--px-12) 0;
	}

	.products .products_list li .products_list_info dl dt span {
		border: 1px solid #000000;
		display: inline-block;
		vertical-align: top;
		font-size: var(--px-16);
		padding: var(--px-6) var(--px-12) var(--px-4) var(--px-12);
		line-height: 1.5;
	}

	.products .products_list li .products_list_info dl dd {
		font-size: var(--px-16);
		line-height: 2.1875;
	}

	.products .products_list li .products_list_info dl dd a {
		color: #204e84;
		text-decoration: underline;
	}
	.products .products_list li .products_list_info dl dd a::after {
		content: "";
		display: inline-block;
		width: var(--px-8);
		height: var(--px-8);
		background-image: url('/common/img/icon_arrow_navy.svg');
		background-size: contain;
		background-repeat: no-repeat;
		margin: 0 0 0 var(--px-4);
		vertical-align: middle;
    transform: translate(0, 0);
    transition: transform 0.3s;
	}
	.products .products_list li .products_list_info dl dd a:hover::after {
    transform: translate(3px, -3px);
	}

	.products .products_note {
		font-size: var(--px-16);
		line-height: 2.1875;
		margin: var(--px-100) 0 0 auto;
		width: calc(100% - var(--px-280));
	}


}

@media screen and (max-width: 767px) {

	.headline_ttl span[data-type="main"] {
		white-space: nowrap;
	}

	body[data-type="RN2024"] main .inner {
		position: relative;
		z-index: 1;
	}

  .bg_circle_logo img {
    width: 100%;
    height: auto;
  }

	.products {
		padding: 0 0 var(--px-140) 0;
	}

	.products .products_mv {
		margin: 0 -6vw var(--px-70) -6vw;
	}

	.products .products_mv img {
		max-width: 100%;
		width: 100%;
		height: auto;
	}

	.products .products_desc {
		font-size: var(--px-16);
		line-height: 1.8125;
	}

	.products .products_list {
		margin: var(--px-30) 0 0 0;
	}

	.products .products_list li:not(:last-child) {
		margin: 0 0 var(--px-40) 0;
	}

	.products .products_list li .products_list_img {
		margin: 0 0 var(--px-36) 0;
		position: relative;
	}

	.products .products_list li .products_list_img img {
		width: auto;
		height: var(--px-260);
		margin: 0 auto;
		position: relative;
		display: block;
		z-index: 1;
	}

	.products .products_list li .products_list_img::after {
		content: "";
		display: block;
		aspect-ratio: 672/648;
		background-image: url('/en/brands/img/bottle_shadow.png');
		background-size: contain;
		background-repeat: no-repeat;
		width: 100%;
		height: auto;
		position: absolute;
		bottom: var(--px-28-);
		left: 0;
	}

	.products .products_list li .products_list_info h2 {
		margin: 0 0 var(--px-22) 0;
	}

	.products .products_list li .products_list_info h2 span {
		font-size: var(--px-24);
		font-weight: 700;
	}

	.products .products_list li .products_list_info p.products_info {
		font-size: var(--px-17);
		margin: 0 0 var(--px-28) 0;
	}

	.products .products_list li .products_list_info p.products_list_desc {
		font-size: var(--px-16);
		line-height: 1.8125;
	}

	.products .products_list li .products_list_info dl {
		margin: var(--px-40) 0 0 0;
	}

	.products .products_list li .products_list_info dl dt {
		margin: 0 0 var(--px-12) 0;
	}

	.products .products_list li .products_list_info dl dt span {
		border: 1px solid #000000;
		display: inline-block;
		vertical-align: top;
		font-size: var(--px-16);
		padding: var(--px-6) var(--px-12) var(--px-4) var(--px-12);
		line-height: 1.5;
	}

	.products .products_list li .products_list_info dl dd {
		font-size: var(--px-16);
		line-height: 1.8125;
	}

	.products .products_list li .products_list_info dl dd a {
		color: #204e84;
		text-decoration: underline;
	}
	.products .products_list li .products_list_info dl dd a::after {
		content: "";
		display: inline-block;
		width: var(--px-8);
		height: var(--px-8);
		background-image: url('/common/img/icon_arrow_navy.svg');
		background-size: contain;
		background-repeat: no-repeat;
		margin: 0 0 0 var(--px-4);
		vertical-align: middle;
    transform: translate(0, 0);
    transition: transform 0.3s;
	}
	.products .products_list li .products_list_info dl dd a:hover::after {
    transform: translate(3px, -3px);
	}

	.products .products_note {
		font-size: var(--px-16);
		line-height: 1.8125;
		margin: var(--px-100) 0 0 0;
	}



}