@charset "utf-8";
/* CSS Document */

/* base
-----------------------------------------------*/
/* ========== base style ========== */

/* common parts
-----------------------------------------------*/
/* ========== text ========== */
/* ========== border ========== */
/* ========== float ========== */
/* ========== display ========== */
/* ========== position ========== */
/* ========== overflow ========== */
/* ========== width ========== */
/* ========== margin ========== */
/* ========== background ========== */
/* ========== device displaying ========== */
/* ========== animation for ScrollTrigger.min.js  ========== */

/* other style
-----------------------------------------------*/
.page-top-btn a {
    width: 50px;
    height: 50px;
    background: none;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 9999px;
}
.page-top-btn a::before,
.page-top-btn a::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 15px;
  height: 1px;
  background-color: #000;
}

.page-top-btn a::before {
  left: 11px;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.page-top-btn a::after {
  right: 11px;
  transform: rotate(45deg);
  transform-origin: left center;
}

.js-crossfade-wrapper {
    position: relative;
    width: 100%;
}
.js-crossfade-wrapper picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.js-crossfade-wrapper picture:first-child {
    position: relative;
    display: block;
}

.js-crossfade-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1;
}
.js-crossfade-item.is-active {
    opacity: 1;
    z-index: 2;
}

/* ========== device displaying ========== */
.sp_none{ display: none; }
img.sp_none{ display: none; }
.sp_only{ display: block; }
img.sp_only{ display: block; }
@media (min-width:768px){
	.sp_none{display: block;}
	img.sp_none{display: block;}
	.tab_none { display: none; }
	img.tab_none { display: none; }
	.sp_only{display: none;}
	img.sp_only{display: none;}
	.sp_only{display: none;}
	img.sp_only{display: none;}
}
.spc_none{ display: block; }
@media (min-width:720px){.pc_none{display: block;}}
.pc_only{ display: none; }
@media (min-width:721px){.pc_none{display: none;}
.pc_only{display: block;}
.tab_none{ display: block; }
}

/* ========== animation for ScrollTrigger.min.js  ========== */
.invisible {
transition: opacity 1s ease;
opacity: 0.0;
}
.visible {
transition: opacity 1s ease;
opacity: 1.0;
}

/* font
-----------------------------------------------*/
.main-lead__text,
.main-lead__title,
.line-up__list-label,
.line-up__list-price,
.intro__heading-label,
.intro__data-item,
.intro__data-title,
.bottom-btn {
	font-family: fot-cezanne-pron, sans-serif;
	font-style: normal;
	font-weight: 500;
}
.line-up__title,
.intro__heading-number,
.intro__data-label,
.intro__data-price,
.intro__btn,
.credit__name,
.credit__price,
.credit__link-btn-item, 
.bottom-role {
	font-family: helvetica-neue-lt-pro, sans-serif;
	font-style: normal;
	font-weight: 300;
}

/* other style
-----------------------------------------------*/
body{margin:0;}
img{vertical-align: top;}


@media screen and (max-width: 767px) {
	.main {padding-bottom: 32.00vw;color: #000;}
	/* =========================================
	   main-visual
	========================================= */
	.main-visual {
		position: relative;
		width: 100.00vw;
		height: 133.33vw;
	}
	.main-visual__logo {
		position: absolute;
		top: 4.00vw;
		left: 4.27vw;
		z-index:2;
	}
	.main-visual__logo-item {
		width: 35.20vw;
		height: 8.53vw;
	}
	.main-visual__image {
		position: relative;
		width: 100.00vw;
		height: 133.33vw;
		overflow: hidden;
	}
	.main-visual__image picture {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		opacity: 0;
	}
	.main-visual__image-item {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.main-visual__image picture:nth-child(1) {
		animation: crossfade1 8s infinite;
	}

	.main-visual__image picture:nth-child(2) {
		animation: crossfade2 8s infinite;
	}

	@keyframes crossfade1 {
		0% { opacity: 1; }
		45% { opacity: 1; }
		55% { opacity: 0; }
		95% { opacity: 0; }
		100% { opacity: 1; }
	}

	@keyframes crossfade2 {
		0% { opacity: 0; }
		45% { opacity: 0; }
		55% { opacity: 1; }
		95% { opacity: 1; }
		100% { opacity: 0; }
	}

	.main-visual__title {
		margin: 0;
		position: absolute;
		bottom: 8vw;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
	}
	.main-visual__title-item{
		width: 85.07vw;
		height: 29.33vw;
	}

	/* =========================================
	   main-lead
	========================================= */
	.main-lead {
		padding: 8.00vw 8.00vw 13.33vw;
		background-image: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url("../images/bg_lead_sp.png");
		background-size: 350.93vw 409.07vw;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.main-lead__text {
		margin: 0;
		font-size: 3.20vw;
		line-height: calc(7.47vw / 3.20vw);
		letter-spacing: -0.02em;
		text-align: center;
	}
	.main-lead__text + .main-lead__text {
		margin-top: 8.00vw;
	}
	.main-lead__title {
		margin: 12.00vw 0 0;
		font-size: 6.13vw;
		line-height: 1;
		letter-spacing: -0.02em;
		text-align: center;
	}

	/* =========================================
	   line-up
	========================================= */
	.line-up {
		margin: 10.67vw 0 0;
		padding: 0 0 13.33vw;
	}
	.line-up.--bottom {
		padding-top: 13.33vw;
	}
	.line-up__title {
		font-size: 6.40vw;
		line-height: 1;
		letter-spacing: 0.1em;
		text-align: center;
	}
	.line-up__list {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 6.93vw 3.47vw;
		margin: 9.33vw auto 0;
		padding: 0;
		list-style: none;
	}
	.line-up__list-item {
		width: 39.47vw;
	}
	.line-up__list-link {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.33vw;
		color: #000;
		text-decoration: none;
	}
	.line-up__list-link:hover {
		text-decoration: underline;
	}
	.line-up__list-image {
		width: 39.47vw;
		height: 36.00vw;
	}
	.line-up__list-label {
		font-size: 2.93vw;
		line-height: 1.25;
		letter-spacing: 0;
		text-align: center;
	}
	.line-up__list-price {
		font-size: 2.93vw;
		line-height: 1.25;
		letter-spacing: 0;
	}

	/* =========================================
	   intro
	========================================= */
	.intro {
		margin: 10.67vw auto 0;
		padding: 0 0 10.67vw;
		border-top: 0.53vw solid #000;
		width: 100vw;
		background-image: url("../images/dot-line_sp.png"), url("../images/bg_intro_sp.png");
		background-repeat: repeat-x, no-repeat;
		background-position: left bottom, top center;
		background-size: 100.00vw 0.27vw, cover;
	}
	.intro__heading {
		padding: 4.00vw 4.53vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-image: url("../images/dot-line_sp.png");
		background-repeat: repeat-x;
		background-position: left bottom;
		background-size: 100.00vw 0.27vw;
	}
	.intro__heading-number {
		position: relative;
		flex: 1;
		font-size: 4.53vw;
		line-height: 1;
		letter-spacing: 0.12em;
		text-decoration: underline;
		text-underline-offset: 1.07vw;
		text-decoration-thickness: 0.27vw;
	}
	.intro__heading-label {
		display: flex;
		justify-content: center;
		font-size: 2.93vw;
		line-height: 1;
		letter-spacing: 0.02em;
	}
	.intro__heading-logo {
		display:none;
	}
	.intro__content {
		margin: 8.00vw 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 8.00vw;
	}
	.intro__image {
		width: 74.67vw;
		height: 74.67vw;
	}
	.intro__data {
		margin: 0;
	}
	.intro__data-wrapper {
		display: flex;
		align-items: center;
		gap: 5.33vw;
		padding: 0;
	}
	.intro__data-wrapper + .intro__data-wrapper {
		margin-top: 5.33vw;
	}
	.intro__data-label {
		margin: 0;
		font-size: 2.93vw;
		line-height: 1;
		letter-spacing: 0.02em;
	}
	.intro__data-label::after {
		content: ":";
		margin-left: 1.07vw;
	}
	.intro__data-item {
		margin: 0;
		font-size: 3.20vw;
		line-height: calc(6.67vw / 3.20vw);
		letter-spacing: 0;
		width: 76.80vw;
	}
	.intro__data-title {
		margin: 0;
		font-size: 4.80vw;
		line-height: 1;
		letter-spacing: 0.02em;
	}
	.intro__data-price {
		font-size: 3.20vw;
		line-height: 1;
		letter-spacing: 0.02em;
	}
	.intro__em {
		font-size: 3.73vw;
		line-height: calc(6.67vw / 3.73vw);
		letter-spacing: 0;
	}
	.intro01 .intro__color-image {width: 71.20vw;height: auto;}
	.intro02 .intro__color-image {width: 71.20vw;height: auto;}
	.intro03 .intro__color-image {width: 32.00vw;height: auto;}
	.intro04 .intro__color-image {width: 16.27vw;height: auto;}
	.intro05 .intro__color-image {width: 24.00vw;height: auto;}
	.intro__btn-wrapper {
		margin: 10.67vw 0 0;
		display: flex;
		justify-content: center;
	}
	.intro__btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60.00vw;
		height: 10.67vw;
		text-align: center;
		background-color: #000;
		border-radius: 1.00vw;
		font-size: 3.73vw;
		line-height: 1;
		letter-spacing: 0.16em;
		color: #fff;
		text-decoration: none;
		border: 0.27vw solid #000;
		transition: color 0.1s ease-out, background-color 0.1s ease-out;
	}
	.intro__btn:hover {
		background-color: #fff;
		color: #000;
	}
	.intro__footer-logo {
		margin: 10.67vw 0 0;
		display: flex;
		justify-content: center;
	}
	.intro__footer-logo-image {
		width: 23.47vw;
		height: 3.20vw;
	}

	/* =========================================
	   look
	========================================= */
	.look {
		margin: 10.67vw 0 0;
		width: 100.00vw;
	}
	.look__wrapper {
		display: block;
	}
	.look__image {
		width: 100.00vw;
		height: 133.33vw;
	}

	/* =========================================
	   credit
	========================================= */
	.credit-wrapper {
		margin: 3.47vw 2.67vw 0 0;
		display: flex;
		justify-content:flex-end;
	}
	.credit {
		margin: 0;
	}
	.credit__row {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.credit__row + .credit__row {
		margin-top: 1.60vw;
	}
	.credit__name {
		margin: 0;
		font-size: 2.93vw;
		line-height: 1;
		letter-spacing: 0.06em;
	}
	.credit__price {
		margin: 0 0 0 1.07vw;
		font-size: 2.93vw;
		line-height: 1;
		letter-spacing: 0.06em;
	}
	.credit__link {
		margin: 0 0 0 2.13vw;
	}
	.credit__link-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 11.20vw;
		height: 4.27vw;
		background-color: #000;
		text-decoration: none;
		border: 0.27vw solid #000;
		transition: background-color 0.1s ease-out;
	}
	.credit__link-btn:hover {
		background-color: #fff;
	}
	.credit__link-btn-item {
		color: #fff;
		font-size: 2.67vw;
		line-height: 1;
		letter-spacing: 0.14em;
		transition: color 0.1s ease-out;
	}
	.credit__link-btn:hover .credit__link-btn-item {
		color: #000;
	}

	/* =========================================
	   bottom-btn
	========================================= */
	.bottom-btn-wrapper {
		margin: 10.67vw 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4.80vw;
	}
	.bottom-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70.00vw;
		height: 9.07vw;
		border-radius: 2666.40vw;
		background-color: #F0EBE5;
		border: 0.27vw solid #000;
		font-size: 2.93vw;
		line-height: 1;
		letter-spacing: 0;
		text-decoration: none;
		color: #000;
		transition: all 0.3s ease-out;
	}
	.bottom-btn:hover {
		transform: translateY(-0.53vw);
		box-shadow: 0 2.13vw 4.00vw rgba(0, 0, 0, 0.2);
	}
	.bottom-btn.--secondary {
		background-color: #E5EFF0;
	}
	.bottom-btn__label {}
	.bottom-role {
		margin: 10.6vw 0 0;
		font-size: 2.6vw;
		line-height:1.82;
		letter-spacing:0.06em;
		text-align: center;
	}
}

@media screen and (min-width: 768px) {
	.main {padding-bottom: 120px;color: #000;}
	/* =========================================
	   main-visual
	========================================= */
	.main-visual {
		position: relative;
	}
	.main-visual__logo {
		position: absolute;
		top: 2.01vw;
		left: 2.15vw;
	}
	.main-visual__logo-item {
		width: 12.64vw;
		height: 3.06vw;
	}
	.main-visual__image {
		display: flex;
	}
	.main-visual__image-item {
		width: 50vw;
		height: 66.66vw;
	}
	.main-visual__title {
		margin: 0;
		position: absolute;
		bottom: 4.51vw;
		left: 2.57vw;
	}
	.main-visual__title-item{
		width: 44.31vw;
		height: 15.28vw;
	}

	/* =========================================
	   main-lead
	========================================= */
	.main-lead {
		padding: 84px 115px 115px;
		background-image: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url("../images/bg_lead.jpg");
		background-size: 2100px 2447px;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.main-lead__text {
		margin: 0;
		font-size: 16px;
		line-height: calc(38px / 16px);
		letter-spacing: 0.02em;
		text-align: center;
	}
	.main-lead__text + .main-lead__text {
		margin-top: 30px;
	}
	.main-lead__title {
		margin: 45px 0 0;
		font-size: 48px;
		line-height: 1;
		letter-spacing: 0.02em;
		text-align: center;
	}

	/* =========================================
	   line-up
	========================================= */
	.line-up {
		margin: 70px 0 0;
		padding: 0 0 50px;
	}
	.line-up.--bottom {
		margin-top: 175px;
	}
	.line-up__title {
		font-size: 33px;
		line-height: 1;
		letter-spacing: 0.1em;
		text-align: center;
	}
	.line-up__list {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 24px 12px;
		margin: 48px auto 0;
		padding: 0;
		list-style: none;
	}
	.line-up__list-item {
		width: 198px;
	}
	.line-up__list-link {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		color: #000;
		text-decoration: none;
	}
	.line-up__list-link:hover {
		text-decoration: underline;
	}
	.line-up__list-image {
		width: 198px;
		height: 180px;
	}
	.line-up__list-label {;
		font-size: 14px;
		line-height: 1;
		letter-spacing: 0;
	}
	.line-up__list-price {;
		font-size: 14px;
		line-height: 1;
		letter-spacing: 0;
	}

	/* =========================================
	   intro
	========================================= */
	.intro {
		margin: 100px auto 0;
		padding: 0 0 60px;
		border-top: 2px solid #000;
		width: 85%;
		background-image: url("../images/dot-line.png"), url("../images/bg_intro.png");
		background-repeat: repeat-x, no-repeat;
		background-position: left bottom, top center;
		background-size: 1240px 1px, cover;
	}
	.intro__heading {
		padding: 37px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-image: url("../images/dot-line.png");
		background-repeat: repeat-x;
		background-position: left bottom;
		background-size: 1240px 1px;
	}
	.intro__heading-number {
		position: relative;
		flex: 1;
		font-size: 17px;
		line-height: 1;
		letter-spacing: 0.12em;
		text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
	}
	.intro__heading-label {
		display: flex;
		justify-content: center;
		font-size: 16px;
		line-height: 1;
		letter-spacing: 0.02em;
	}
	.intro__heading-logo {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	.intro__heading-logo-image {
		width: 120px;
		height: 16px;
	}
	.intro__content {
		margin: 40px 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 20px;
	}
	.intro__image {
		width: 330px;
		height: 330px;
	}
	.intro__data {
		margin: 0;
	}
	.intro__data-wrapper {
		display: flex;
		align-items: center;
		gap: 28px;
		padding: 0 0 0 20px;
	}
	.intro__data-wrapper + .intro__data-wrapper {
		margin-top: 33px;
	}
	.intro__data-label {
		margin: 0;
		font-size: 13px;
		line-height: 1;
		letter-spacing: 0.02em;
	}
	.intro__data-label::after {
		content: ":";
		margin-left: 4px;
	}
	.intro__data-item {
		margin: 0;
		font-size: 14px;
		line-height: calc(30px / 14px);
		letter-spacing: 0;
	}
	.intro__data-title {
		margin: 0;
		font-size: 25px;
		line-height: 1;
		letter-spacing: 0.02em;
	}
	.intro__data-price {
		font-size: 15px;
		line-height: 1;
		letter-spacing: 0.02em;
	}
	.intro__em {
		font-size: 18px;
		line-height: calc(32px / 18px);
		letter-spacing: 0;
	}
	.intro01 .intro__color-image {width: 350px;height: auto;}
	.intro02 .intro__color-image {width: 350px;height: auto;}
	.intro03 .intro__color-image {width: 157px;height: auto;}
	.intro04 .intro__color-image {width: 80px;height: auto;}
	.intro05 .intro__color-image {width: 118px;height: auto;}
	.intro__btn-wrapper {
		margin: 48px 0 0;
		display: flex;
		justify-content: center;
	}
	.intro__btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 340px;
		height: 55px;
		text-align: center;
		background-color: #000;
		border-radius: 5px;
		font-size: 19px;
		line-height: 1;
		letter-spacing: 0.16em;
		color: #fff;
		text-decoration: none;
		border: 1px solid #000;
		transition: color 0.1s ease-out, background-color 0.1s ease-out;
	}
	.intro__btn:hover {
		background-color: #fff;
		color: #000;
	}
	.intro__footer-logo {display: none;}
	.intro__footer-logo-image {}

	/* =========================================
	   look
	========================================= */
	.look {
		margin: 100px 0 0;
		width: 100%;
	}
	.look__wrapper {
		display: flex;
	}
	.look__image {
		width: 50vw;
		height: 66.69vw;
	}

	/* =========================================
	   credit
	========================================= */
	.credit-wrapper {
		margin: 13px 13px 0 0;
		display: flex;
		justify-content:flex-end;
	}
	.credit {
		margin: 0;
	}
	.credit__row {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.credit__row + .credit__row {
		margin-top: 6px;
	}
	.credit__name {
		margin: 0;
		font-size: 11px;
		line-height: 1;
		letter-spacing: 0.06em;
	}
	.credit__price {
		margin: 0 0 0 4px;
		font-size: 11px;
		line-height: 1;
		letter-spacing: 0.06em;
	}
	.credit__link {
		margin: 0 0 0 8px;
	}
	.credit__link-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 16px;
		background-color: #000;
		text-decoration: none;
		border: 1px solid #000;
		transition: background-color 0.1s ease-out;
	}
	.credit__link-btn:hover {
		background-color: #fff;
	}
	.credit__link-btn-item {
		color: #fff;
		font-size: 10px;
		line-height: 1;
		letter-spacing: 0.14em;
		transition: color 0.1s ease-out;
	}
	.credit__link-btn:hover .credit__link-btn-item {
		color: #000;
	}

	/* =========================================
	   bottom-btn
	========================================= */
	.bottom-btn-wrapper {
		margin: 80px 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 23px;
	}
	.bottom-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 380px;
		height: 46px;
		border-radius: 9999px;
		background-color: #F0EBE5;
		border: 1px solid #000;
		font-size: 14.5px;
		line-height: 1;
		letter-spacing: 0;
		text-decoration: none;
		color: #000;
		transition: all 0.3s ease-out;
	}
	.bottom-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
	}
	.bottom-btn.--secondary {
		background-color: #E5EFF0;
	}
	.bottom-btn__label {}
	.bottom-role {
		margin: 80px 0 0;
		font-size: 11px;
		line-height:1.82;
		letter-spacing:0.06em;
		text-align: center;
	}
}

@media screen and (min-width: 1240px) {
	.intro {
		width: 1240px;
	}
	.intro__heading {
		padding: 37px 125px;
	}
	.intro__content {
		flex-direction: row;
		gap: 64px;
	}
	.look {
		margin: 100px auto 0;
		padding: 0;
		width: 1240px;
	}
	.look__image {
		width: 620px;
		height: 827px;
	}
	.credit-wrapper {
		margin: 13px 0 0 0;
	}
}