﻿@charset "UTF-8";

/* ===============================================### 
可変設定
###=============================================== */
.lp_container {
  /*デザインの値*/
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 750;/*SPデザイン幅*/
  --pc-artboard-width: 1400;/*SP共通デザイン幅*/
  --sp-artboard-width: 750;/*PC共通デザイン幅*/
  /*可変率の計算式*/
  --formula: calc(var(--variable) * var(--ratio));/*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1);/*PCデザインの可変割合の計算式*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .lp_container {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比 */
  --variable: 1px; /* 固定値（可変しない） */
  }
}

/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .lp_container {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .lp_container {
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}


/* ===============================================### 
初期設定
###=============================================== */
.fruit_0423{
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	--fw-thin: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semi-bold: 600;
	--fw-bold: 700;
	font-style: normal;
	color: #231815;
	--color-black: #231815;
	--color-white: #fff;
	overflow: clip;
}

.fruit_0423 img{
	width: 100%;
	height: auto;
}

/* ===========### PCのみ表示 ###=========== */
@media screen and (min-width: 768px) {
	.fruit_0423 .pc-visible{
		display: block;
	}

	.fruit_0423 .sp-visible{
		display: none;
	}

	.fruit_0423 .image-bg{
		background-color: #fff;
	}

	.fruit_0423 .image-bg a:hover{
		opacity: 0.7;
	}

	.fruit_0423 .inner{
		padding-top: 20px;
	}

	.fruit_0423 .inner-bd{
		max-width: 1000px;
    margin: 0 auto;
	}

	.breadcrumbs{
		width: 106rem;
		max-width: 120rem;
		margin: 0 auto;
		padding: 2rem 0;
	}
}

/* ===========### SPのみ表示 ###=========== */
@media screen and (max-width: 767px) {
	.fruit_0423 .pc-visible{
		display: none;
	}

	.fruit_0423 .sp-visible{
		display: block;
	}
}



/* ===============================================### 
アニメーション設定
###=============================================== */
/************** fade-in **************/
.fruit_0423 .js-fade-in{
	opacity: 0;
	transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.fruit_0423 .js-fade-in.show{
	opacity: 1;
}

.fruit_0423 .js-line-animation{
	position: relative;
}

.fruit_0423 .js-line-animation.show::after{
	content: '';
	position: absolute;
	top: calc(105 * var(--formula_pc));
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 0;
	background-color: #40210F;
	animation: line-anime 1.8s ease forwards;
	animation-delay: 0.5s;
}

@keyframes line-anime {
	0%{
		height: 0;
	}
	100%{
		height: calc(342 * var(--formula_pc));
	}
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.fruit_0423 .js-line-animation.show::after{
		top: calc(55 * var(--formula));
		width: 1px;
	}

	@keyframes line-anime {
		0%{
			height: 0;
		}
		100%{
			height: calc(182 * var(--formula));
		}
	}
}


/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.fruit_0423 .content{
	width: 100%;
}

.fruit_0423 .content .content__inner{
	/* width: calc(750 * var(--formula_pc)); */
	width: calc(1400 * var(--formula_pc));
	margin-inline: auto;
}

.fruit_0423 .flex-wrap{
	display: flex;
}

.fruit_0423 .grid-wrap{
	display: grid;
}

/************** text **************/


/************** image **************/

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.fruit_0423 .content{
		width: 100%;
	}

	.fruit_0423 .content .content__inner{
		width: calc(750 * var(--formula));
	}

	.fruit_0423 .flex-wrap{
		display: flex;
	}
}



/* ===============================================### 
MV
###=============================================== */
.fruit_0423 .mv{
	padding-bottom: calc(552 * var(--formula_pc));
}

.fruit_0423 .mv__inner{
	width: calc(1400 * var(--formula_pc));
	margin-inline: auto;
}

/************** text **************/
.fruit_0423 .mv__text{
	margin-top: calc(143 * var(--formula_pc));
	font-size: calc(34 * var(--formula_pc));
	font-weight: var(--fw-regular);
	line-height: 1.2;
	font-feature-settings: "palt";
	letter-spacing: 0;
	text-align: center;
}

/************** image **************/

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.fruit_0423 .mv{
		padding-bottom: calc(294 * var(--formula));
	}

	.fruit_0423 .mv__inner{
		width: calc(750 * var(--formula));
		margin-inline: auto;
	}

	/************** text **************/
	.fruit_0423 .mv__text{
		margin-top: calc(79 * var(--formula));
		font-size: calc(18 * var(--formula));
		font-weight: var(--fw-regular);
		line-height: 1.2;
		font-feature-settings: "palt";
		letter-spacing: 0;
		text-align: center;
	}
}


/* ===============================================### 
コンテンツ01
###=============================================== */
.fruit_0423 .content01{
}

.fruit_0423 .content01 .content__inner{
}

.fruit_0423 .content01 .content__item.item01{
}

.fruit_0423 .content01 .content__item.item02{
	width: calc(768 * var(--formula_pc));
	margin-top: calc(108 * var(--formula_pc));
	margin-left: calc(47 * var(--formula_pc));
}

.fruit_0423 .content01 .content__item.item03{
	margin-top: calc(88 * var(--formula_pc));
	margin-left: calc(379 * var(--formula_pc));
}

.fruit_0423 .content01 .flex-wrap{
}

.fruit_0423 .content01 .grid-wrap{
	grid-template-columns: repeat(2, 1fr);
}

/************** text **************/

/************** image **************/
.fruit_0423 .content01 .content__title{
	width: calc(493 * var(--formula_pc));
	margin-top: calc(52 * var(--formula_pc));
	margin-inline: auto;
}

.fruit_0423 .content01 .content__item.item01 .content__image{
	width: calc(740 * var(--formula_pc));
	margin-inline: auto;
}

.fruit_0423 .content01 .content__item.item02 .content__image{
	width: calc(384 * var(--formula_pc));
}

.fruit_0423 .content01 .content__item.item03 .content__image{
	width: calc(494 * var(--formula_pc));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.fruit_0423 .content01{
	}

	.fruit_0423 .content01 .content__inner{
	}

	.fruit_0423 .content01 .content__item.item01{
		position: relative;
	}

	.fruit_0423 .content01 .content__item.item02{
		width: calc(408 * var(--formula));
		margin-top: calc(52 * var(--formula));
		margin-left: calc(27 * var(--formula));
	}

	.fruit_0423 .content01 .content__item.item03{
		margin-top: calc(49 * var(--formula));
		margin-left: calc(199 * var(--formula));
	}

	.fruit_0423 .content01 .flex-wrap{
	}

	/************** text **************/

	/************** image **************/
	.fruit_0423 .content01 .content__title{
		width: calc(290 * var(--formula));
		margin-top: calc(21 * var(--formula));
		margin-inline: auto;
	}

	.fruit_0423 .content01 .content__item.item01 .content__image{
		width: calc(403 * var(--formula));
		margin-inline: auto;
	}

	.fruit_0423 .content01 .content__item.item02 .content__image{
		width: calc(206 * var(--formula));
		margin-inline: auto;
	}

	.fruit_0423 .content01 .content__item.item03 .content__image{
		width: calc(264 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ02
###=============================================== */
.fruit_0423 .content02{
	margin-top: calc(161 * var(--formula_pc));
}

.fruit_0423 .content02 .content__inner{
	position: relative;
}

.fruit_0423 .content02 .content__item.item01{
}

.fruit_0423 .content02 .content__item.item02{
	position: relative;
	z-index: 1;
	margin-top: calc(-233 * var(--formula_pc));
	margin-left: calc(830 * var(--formula_pc));
}

.fruit_0423 .content02 .content__item.item03{
	margin-top: calc(-118 * var(--formula_pc));
	margin-left: calc(79 * var(--formula_pc));
}

.fruit_0423 .content02 .content__item.item04{
	margin-top: calc(117 * var(--formula_pc));
}

.fruit_0423 .content02 .flex-wrap{
}

/************** text **************/

/************** image **************/
.fruit_0423 .content02 .content__title{
	position: absolute;
	top: calc(760 * var(--formula_pc));
	left: calc(120 * var(--formula_pc));
	width: calc(690 * var(--formula_pc));
	z-index: 1;
	pointer-events: none;
}

.fruit_0423 .content02 .content__item.item01 .content__image{
	width: calc(1045 * var(--formula_pc));
}

.fruit_0423 .content02 .content__item.item02 .content__image{
	width: calc(565 * var(--formula_pc));
}

.fruit_0423 .content02 .content__item.item03 .content__image.image01{
	width: calc(464 * var(--formula_pc));
}

.fruit_0423 .content02 .content__item.item03 .content__image.image02{
	margin-top: calc(347 * var(--formula_pc));
	width: calc(855 * var(--formula_pc));
}

.fruit_0423 .content02 .content__item.item04 .content__image.image01{
	width: calc(405 * var(--formula_pc));
}

.fruit_0423 .content02 .content__item.item04 .content__image.image02{
	width: calc(474 * var(--formula_pc));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.fruit_0423 .content02{
		margin-top: calc(84 * var(--formula));
	}

	.fruit_0423 .content02 .content__inner{
		position: relative;
	}

	.fruit_0423 .content02 .content__item.item01{
	}

	.fruit_0423 .content02 .content__item.item02{
		margin-top: calc(-128 * var(--formula));
		margin-left: calc(445 * var(--formula));
	}

	.fruit_0423 .content02 .content__item.item03 {
		margin-top: calc(-58 * var(--formula));
		margin-left: calc(46 * var(--formula_pc));
	}

	.fruit_0423 .content02 .content__item.item04{
		margin-top: calc(66 * var(--formula));
	}

	.fruit_0423 .content02 .flex-wrap{
	}

	/************** text **************/

	/************** image **************/
	.fruit_0423 .content02 .content__title{
		position: absolute;
		top: calc(411 * var(--formula));
		left: calc(65 * var(--formula));
		width: calc(365 * var(--formula));
		z-index: 1;
		pointer-events: none;
	}

	.fruit_0423 .content02 .content__item.item01 .content__image{
		width: calc(562 * var(--formula));
	}

	.fruit_0423 .content02 .content__item.item02 .content__image {
		width: calc(303 * var(--formula_pc));
	}

	.fruit_0423 .content02 .content__item.item03 .content__image.image01{
		width: calc(246 * var(--formula));
	}

	.fruit_0423 .content02 .content__item.item03 .content__image.image02{
		margin-top: calc(185 * var(--formula));
		width: calc(455 * var(--formula));
	}

	.fruit_0423 .content02 .content__item.item04 .content__image.image01{
		width: calc(215 * var(--formula));
	}

	.fruit_0423 .content02 .content__item.item04 .content__image.image02{
		width: calc(251 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ03
###=============================================== */
.fruit_0423 .content03{
	margin-top: calc(350 * var(--formula_pc));
}

.fruit_0423 .content03 .content__inner{
}

.fruit_0423 .content03 .content__item.item01{
}

.fruit_0423 .content03 .content__item.item02{
	margin-top: calc(160 * var(--formula_pc));
}

.fruit_0423 .content03 .content__item.item03{
	position: relative;
	margin-top: calc(-373 * var(--formula_pc));
	margin-left: calc(843 * var(--formula_pc));
	z-index: 1;
}

.fruit_0423 .content03 .flex-wrap{
}

/************** text **************/

/************** image **************/
.fruit_0423 .content03 .content__title{
	width: calc(626 * var(--formula_pc));
	margin-top: calc(69 * var(--formula_pc));
	margin-inline: auto;
}

.fruit_0423 .content03 .content__item.item01 .content__image{
	width: calc(1391 * var(--formula_pc));
	margin-inline: auto;
}

.fruit_0423 .content03 .content__item.item02 .content__image{
	width: calc(377 * var(--formula_pc));
}

.fruit_0423 .content03 .content__item.item03 .content__image{
	width: calc(453 * var(--formula_pc));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.fruit_0423 .content03{
		margin-top: calc(190 * var(--formula));
	}

	.fruit_0423 .content03 .content__inner{
	}

	.fruit_0423 .content03 .content__item.item01{
	}

	.fruit_0423 .content03 .content__item.item02{
		margin-top: calc(86 * var(--formula));
	}

	.fruit_0423 .content03 .content__item.item03{
		position: relative;
		margin-top: calc(-196 * var(--formula));
		margin-left: calc(453 * var(--formula));
		z-index: 1;
	}

	.fruit_0423 .content03 .flex-wrap{
	}

	/************** text **************/

	/************** image **************/
	.fruit_0423 .content03 .content__title{
		width: calc(333 * var(--formula));
		margin-top: calc(36 * var(--formula));
		margin-inline: auto;
	}

	.fruit_0423 .content03 .content__item.item01 .content__image{
		width: calc(746 * var(--formula));
		margin-inline: auto;
	}

	.fruit_0423 .content03 .content__item.item02 .content__image{
		width: calc(199 * var(--formula));
	}

	.fruit_0423 .content03 .content__item.item03 .content__image{
		width: calc(242 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ04
###=============================================== */
.fruit_0423 .content04{
	margin-top: calc(284 * var(--formula_pc));
}

.fruit_0423 .content04 .content__inner{
	position: relative;
}

.fruit_0423 .content04 .content__item.item01{
	position: relative;
	width: fit-content;
}

.fruit_0423 .content04 .content__item.item02{
	margin-top: calc(97 * var(--formula_pc));
}

.fruit_0423 .content04 .flex-wrap{
}

/************** text **************/

/************** image **************/
.fruit_0423 .content04 .content__title{
	position: absolute;
	top: calc(272 * var(--formula_pc));
	right: calc(176 * var(--formula_pc));
	width: calc(738 * var(--formula_pc));
	z-index: 1;
	pointer-events: none;
}

.fruit_0423 .content04 .content__item.item01 .content__image{
	width: calc(1241 * var(--formula_pc));
	/* opacity: 0.6; */
}

.fruit_0423 .content04 .content__item.item02 .content__image.image01{
	width: calc(682 * var(--formula_pc));
	margin-top: calc(318 * var(--formula_pc));
}

.fruit_0423 .content04 .content__item.item02 .content__image.image02{
	width: calc(715 * var(--formula_pc));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.fruit_0423 .content04{
		margin-top: calc(151 * var(--formula));
	}

	.fruit_0423 .content04 .content__inner{
		position: relative;
	}

	.fruit_0423 .content04 .content__item.item01{
		position: relative;
		width: fit-content;
	}

	.fruit_0423 .content04 .content__item.item02{
		margin-top: calc(53 * var(--formula));
	}

	.fruit_0423 .content04 .flex-wrap{
	}

	/************** text **************/

	/************** image **************/
	.fruit_0423 .content04 .content__title{
		position: absolute;
		top: calc(148 * var(--formula));
		right: calc(95 * var(--formula));
		width: calc(394 * var(--formula));
		z-index: 1;
		pointer-events: none;
	}

	.fruit_0423 .content04 .content__item.item01 .content__image{
		width: calc(665 * var(--formula));
		opacity: 0.6;
	}

	.fruit_0423 .content04 .content__item.item02 .content__image.image01{
		width: calc(365 * var(--formula));
		margin-top: calc(173 * var(--formula));
	}

	.fruit_0423 .content04 .content__item.item02 .content__image.image02{
		width: calc(383 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ05
###=============================================== */
.fruit_0423 .content05{
	margin-top: calc(276 * var(--formula_pc));
}

.fruit_0423 .content05 .content__inner{
	position: relative;
}

.fruit_0423 .content05 .content__item.item01{
	position: relative;
	/* margin-left: calc(80 * var(--formula_pc)); */
}

.fruit_0423 .content05 .content__item.item02{
}

.fruit_0423 .content05 .content__item.item03{
	margin-top: calc(73 * var(--formula_pc));
}

.fruit_0423 .content05 .flex-wrap{
}

/************** text **************/

/************** image **************/
.fruit_0423 .content05 .content__title{
	position: absolute;
	top: calc(712 * var(--formula_pc));
	left: 50%;
	transform: translateX(-50%);
	width: calc(580 * var(--formula_pc));
	z-index: 1;
	pointer-events: none;
}

.fruit_0423 .content05 .content__item.item01 .content__image{
	width: calc(1400 * var(--formula_pc));
}

.fruit_0423 .content05 .content__item.item02 .content__image{
	width: calc(1400 * var(--formula_pc));
}

.fruit_0423 .content05 .content__item.item03 .content__image{
	width: calc(617 * var(--formula_pc));
	margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.fruit_0423 .content05{
		margin-top: calc(147 * var(--formula));
	}

	.fruit_0423 .content05 .content__inner{
		position: relative;
	}

	.fruit_0423 .content05 .content__item.item01{
	}

	.fruit_0423 .content05 .content__item.item02{
	}

	.fruit_0423 .content05 .content__item.item03 {
    margin-top: calc(36 * var(--formula));
	}	

	.fruit_0423 .content05 .flex-wrap{
	}

	/************** text **************/

	/************** image **************/
	.fruit_0423 .content05 .content__title{
		position: absolute;
		top: calc(381 * var(--formula));
		width: calc(308 * var(--formula));
		z-index: 1;
		pointer-events: none;
	}

	.fruit_0423 .content05 .content__item.item01 .content__image{
		width: calc(750 * var(--formula));
	}

	.fruit_0423 .content05 .content__item.item02 .content__image{
		width: calc(750 * var(--formula));
	}

	.fruit_0423 .content05 .content__item.item03 .content__image{
		width: calc(330 * var(--formula));
		margin-inline: auto;
	}
}


/* ===============================================### 
item-area
###=============================================== */
.fruit_0423 .item-area {
	position: relative;
	/* margin: 0 auto calc(70 * var(--formula)) auto; */
	padding-bottom: calc(100 * var(--formula));
}

.fruit_0423 .item-area .box08 {
	margin: 0 auto;
	width: calc(119 * var(--formula));
	margin-top: calc(160 * var(--formula));
}

.fruit_0423 .flex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.box08 img {
	width: calc(32 * var(--formula));
}

.fruit_0423 .item-area .box08_1 {
	margin: 0 auto;
	width: calc(164 * var(--formula));
	margin-top: calc(-63 * var(--formula));
	font-size: calc(9 * var(--formula));
}

.fruit_0423 .item-area .box09 {
	display: flex;
	justify-content: center;
	margin-top: calc(-34 * var(--formula));
}

.fruit_0423 .item-area .box09 figure {
	width: calc(170 * var(--formula));
	margin-top: calc(-27 * var(--formula));
	margin-left: 0;
}

.fruit_0423 .item-area .box08_1 p {
	width: fit-content;
	text-align: center;
	letter-spacing: .1px;
}

.fruit_0423 .btn-area {
	display: flex;
	margin: calc(134 * var(--formula)) auto 0;
	padding-bottom: calc(117 * var(--formula));
}

.fruit_0423 .btn-area a {
	margin: 0 auto;
	padding: calc(9 * var(--formula)) calc(30 * var(--formula));
	letter-spacing: 0.1em;
	font-family: 'Nunito', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: calc(10 * var(--formula));
	border: 1px solid #19191E;
	color: #19191E;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.fruit_0423 .item-area .box08 {
		width: calc(200 * var(--formula));
	}

	.box08 img {
    width: calc(55 * var(--formula));
	}

	.fruit_0423 .item-area .box08_1 {
    width: calc(280 * var(--formula));
		margin-top: calc(-55 * var(--formula));
    font-size: calc(15 * var(--formula));
	}

	.fruit_0423 .item-area .box09 figure {
    width: calc(270 * var(--formula));
		margin-top: calc(-21 * var(--formula));
	}

	.fruit_0423 .btn-area {
    margin: calc(156 * var(--formula)) auto 0;
    padding-bottom: calc(157 * var(--formula));
	}

	.fruit_0423 .btn-area a {
    padding: calc(21 * var(--formula)) calc(80 * var(--formula));
    font-size: calc(23 * var(--formula));
	}
}