@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)); /* 画面幅に基づく可変値 */
  }
}

/* ===============================================### 
初期設定
###=============================================== */
.washable_0514 {
	font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
	font-weight: 300;
	--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;
}

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

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

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

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

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

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

	.washable_0514 .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) {
	.washable_0514 .pc-visible {
		display: none;
	}

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



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

.washable_0514 .js-fade-in.left_in {
	transform: translateX(-100px);
}

.washable_0514 .js-fade-in.right_in {
	transform: translateX(100px);
}

.washable_0514 .js-fade-in.show,
.washable_0514 .js-fade-in.left_in.show,
.washable_0514 .js-fade-in.right_in.show {
	opacity: 1;
	transform: translate(0);
}







.lp_content {
	position: relative;
}

.mv__image {
	position: sticky;
	top: 0;
}

.mv__image.is-active {
	top: 200px;
}

.mv__text {
	position: absolute;
	top: calc(708 * (100vw / 750));
	left: 50%;
	transform: translateX(-47%);
	color: #fff;
	text-align: center;
	font-size: calc(22 * (100vw / 750));
	width: calc(500 * (100vw / 750));
	letter-spacing: 0.025em;
	line-height: 1.37;
}

.mv__text span {
	font-size: calc(58 * (100vw / 750));
	letter-spacing: 0.048em;
}

.lp_inner_content {
	position: relative;
	background: #fff;
	padding-top: calc(88* (100vw /750));
	padding-bottom: calc(190* (100vw /750));
}

.aboutitem {
	position: relative;
	background: url(../img/sp/img01.jpg) center/contain no-repeat;
	width: calc(750* (100vw /750));
	height: calc(630* (100vw /750));
}

.aboutitem p {
	padding-top: calc(227 * (100vw / 750));
	line-height: 1.6;
	font-size: calc(20 * (100vw / 750));
	color: #fff;
	text-align: center;
	letter-spacing: -0.01em;
}



.content01 .item01 .grid-wrap {
	width: calc(653 * (100vw / 750));
	margin: calc(53 * (100vw / 750)) auto 0;
}

@media screen and (min-width: 768px) {
	.washable_0514 {
		width: 140rem;
		margin: auto;
	}
	.mv__image{
		width: 110rem;
		margin: auto;
	}
	.mv__text {
		top: 108.7rem;
		font-size: 3.2rem;
		width: 80rem;
		letter-spacing: 0.025em;
		line-height: 1.37;
	}

	.mv__text span {
		font-size: 9.4rem;
		letter-spacing: 0.048em;
	}

	.lp_inner_content {
		padding-top: 11.8rem;
		padding-bottom: 22rem;
	}

	.aboutitem {
		background: url(../img/pc/img01.jpg) center/contain no-repeat;
		width: 140rem;
		height: 73.8rem;
	}

	.aboutitem p {
		padding-top: 24rem;
		line-height: 1.6;
		font-size: 2.3rem;
		letter-spacing: -0.01em;
	}



	.content01 .item01 .grid-wrap {
		width: 93.5rem;
		margin: 12rem auto 0;
	}
}

/* ___________________________*/
.content__image {
	position: relative;
}

.credit_list {
	position: absolute;
	bottom: calc(21 * (100vw / 750));
	right: calc(17 * (100vw / 750));
	display: flex;
	flex-direction: column;
	gap: calc(6 * (100vw / 750));
	line-height: 1;
	font-size: calc(20 * (100vw / 750));
	letter-spacing: 0;
}
@media screen and (max-width: 767px){
	.content03 .credit_list,
	.content05 .credit_list {
		top: calc(21 * (100vw / 750));
		right: calc(17 * (100vw / 750));
		bottom: initial;
	}
}
.text_wrap {
	position: relative;
	margin: calc(32 * (100vw / 750)) auto 0;
	width: calc(550* (100vw /750));
}

.text_ttl {
	font-size: calc(26* (100vw /750));
	line-height: 1;
	font-weight: 300;
	letter-spacing: 0;
}

.text_desc {
	font-size: calc(20* (100vw /750));
	line-height: 1.5;
	margin-top: calc(20* (100vw /750));
	letter-spacing: 0;
}

.text_detial_ttl {
	font-size: calc(20 * (100vw / 750));
	line-height: 1;
	background: #BDBDBD;
	width: calc(150 * (100vw / 750));
	height: calc(34 * (100vw / 750));
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: calc(30 * (100vw / 750));
	border-radius: calc(40* (100vw /750));
	letter-spacing: 0;
}

.accodion_list {
	list-style: none;
	padding: 0;
	width: initial;
	margin: 0 auto;
}

.accodion_list * {
	letter-spacing: 0;
	font-weight: 300;
	line-height: 1.5;
}

.acoodion_btn {
	position: relative;
	display: block;
	padding: calc(10 * (100vw / 750)) 0 0;
	margin: 0;
	cursor: pointer;
	background-color: #fff;
	transition: background-color 0.3s;
	font-size: calc(20 * (100vw / 750));
}

.acoodion_btn span {
	position: absolute;
	right: calc(-16 * (100vw / 750));
	top: 50%;
	transform: translateY(-50%);
	width: calc(20 * (100vw / 750));
	height: calc(20 * (100vw / 750));
}

.acoodion_btn span::before,
.acoodion_btn span::after {
	content: "";
	position: absolute;
	background-color: #000;
	transition: transform 0.3s ease-in-out;

	width: 100%;
	height: 1px;
	top: calc(10* (100vw /750));
	left: 0;
}

/* 
.acoodion_btn span::before {
	width: 100%;
	height: 1px;
	top: calc(10* (100vw /750));
	left: 0;
} */

.acoodion_btn span::after {
	transform: rotate(90deg);
}

.acoodion_btn.is-active span::after {
	transform: rotate(180deg);
}

/* .acoodion_btn.is-active span::before {
	transform: rotate(180deg);
} */

.acoodion_content {
	height: 0;
	overflow: hidden;
	transition: height 0.3s ease-out;
	margin: 0;
	font-size: calc(20 * (100vw / 750));
}

.acoodion_content::before {
	content: "";
	display: block;
	height: calc(10 * (100vw / 750));
}

.acoodion_content::after {
	content: "";
	display: block;
	height: calc(10 * (100vw / 750));
}

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

	.credit_list {
		bottom: 4.1rem;
		right: 4.3rem;
		gap: 1.1rem;
		font-size: 2rem;
		letter-spacing: 0;
	}

	.text_wrap {
		margin: 5rem auto 0;
		width: 60rem;
	}

	.text_ttl {
		font-size: 3.3rem;
		letter-spacing: 0.01em;
	}

	.text_desc {
		font-size: 1.6rem;
		line-height: 1.875;
		margin-top: 2.6rem;
		letter-spacing: 0.07em;
	}

	.text_detial_ttl {
		font-size: 1.3rem;
		width: 9rem;
		height: 1.8rem;
		margin-top: 1.4rem;
		border-radius: 3rem;
	}

	.accodion_list * {
		letter-spacing: 0;
		font-weight: 300;
		line-height: 1.5;
	}

	.acoodion_btn {
		padding: 1.2rem 0 0;
		font-size: 1.3rem;
		letter-spacing: -0.01em;
		width: 36rem;
	}

	.acoodion_btn span {
		right: 1rem;
		width: 1rem;
		height: 1rem;
		transform: translateY(0);
	}

	.acoodion_btn span::before,
	.acoodion_btn span::after {
		top: 0.5rem;
	}

	/* .acoodion_btn span::after {
		left: 0.5rem;
	} */

	.acoodion_content {
		font-size: 1.3rem;
		line-height: 1.65;
	}

	.acoodion_content::before {
		height: 0.5rem;
	}

	.acoodion_content::after {
		height: 0.5rem;
	}
}

/* ___________________________*/
.content01 .content__image_03 {
	margin: calc(53 * (100vw / 750)) auto 0
}

.content02 .content__image_01 {
	width: calc(504 * (100vw / 750));
	margin: calc(113 * (100vw / 750)) auto 0;
}

.content02 .content__image_02 {
	position: relative;
	width: calc(646 * (100vw / 750));
	margin: calc(80 * (100vw / 750)) 0 0 0;
	z-index: 1;
}

.content02 .content__image_02 .image-bg_before {
	position: absolute;
	width: calc(680 * (100vw / 750));
	top: calc(177 * (100vw / 750));
	left: calc(76 * (100vw / 750));
	z-index: -1;
}

.content02 .text_wrap {
	margin: calc(162 * (100vw / 750)) auto 0;
}

.content02 .content__image_03 {
	width: calc(475 * (100vw / 750));
	margin: calc(80 * (100vw / 750)) auto 0;
}

.content03 .content__image_01 {
	margin: calc(110 * (100vw / 750)) auto 0;
}

.content03 .content__image_02 {
	width: calc(468 * (100vw / 750));
	margin: calc(67 * (100vw / 750)) auto 0;
}

.content04 .grid-wrap {
	position: relative;
	display: flex;
	margin: calc(270 * (100vw / 750)) auto 0;
}

.content04 .grid-wrap::before {
	content: "";
	position: absolute;
	background: url(../img/sp/img10_bg.jpg) center/contain no-repeat;
	width: calc(588 * (100vw / 750));
	height: calc(1098 * (100vw / 750));
	top: calc(-193 * (100vw / 750));
	left: calc(0 * (100vw / 750));
}

.content04 .content__image_01 {
	width: calc(373.5 * (100vw / 750));
}

.content04 .content__image_02 {
	width: calc(376.5 * (100vw / 750));
}

.content04 .content__image_03 {
	width: calc(490 * (100vw / 750));
	margin: calc(290 * (100vw / 750)) auto 0;
}

.content05 .grid-wrap {
	position: relative;
	display: flex;
	margin: calc(100 * (100vw / 750)) auto 0;
}

.content05 .content__image_01 {
	width: calc(373* (100vw /750));
}

.content05 .content__image_02 {
	width: calc(377 * (100vw / 750));
}

.content05 .content__image_03 {
	width: calc(475 * (100vw / 750));
	margin: calc(80 * (100vw / 750)) auto 0;
}

@media screen and (min-width: 768px) {
	.content01 .content__image_03 {
		margin: 6rem auto 0;
	}

	.content02 .content__image_01 {
		width: 72rem;
		margin: 16rem auto 0;
	}

	.content02 .content__image_02 {
		width: 111rem;
		margin: 11.3rem 0 0 0;
	}

	.content02 .content__image_02 .image-bg_before {
		width: 110.6rem;
		top: 26rem;
		left: 29.4rem;
	}

	.content02 .text_wrap {
		margin: 23.7rem auto 0;
	}

	.content02 .content__image_03 {
		width: 67.7rem;
		margin: 7.7rem auto 0;
	}

	.content03 .content__image_01 {
		margin: 15.3rem auto 0;
	}

	.content03 .content__image_02 {
		width: 67rem;
		margin: 10rem auto 0;
	}

	.content04 .grid-wrap {
		margin: 36.2rem 0 0 auto;
		justify-content: flex-end;
	}

	.content04 .grid-wrap::before {
		background: url(../img/pc/img10_bg.jpg) center/contain no-repeat;
		width: 103rem;
		height: 155.8rem;
		top: -28rem;
		left: 0rem;
	}

	.content04 .content__image_01 {
		width: 64.8rem;
		flex-shrink: 0;
	}

	.content04 .content__image_02 {
		width: 65.6rem;
	}

	.content04 .content__image_03 {
		width: 70rem;
		margin: 36.1rem auto 0;
	}

	.content05 .grid-wrap {
		margin: 13.2rem auto 0;
		justify-content: center;
	}

	.content05 .content__image_01 {
		width: 54.1rem;
	}

	.content05 .content__image_02 {
		width: 54rem;
	}

	.content05 .content__image_03 {
		width: 67.5rem;
		margin: 10.7rem auto 0;
	}
}

/* ___________________________*/
.aboutitem.aboutitem_foot {
	position: relative;
	background: url(../img/sp/img16.jpg) center/contain no-repeat;
	width: calc(750* (100vw /750));
	height: calc(630* (100vw /750));
	margin: calc(80* (100vw /750)) auto 0;
}

.aboutitem.aboutitem_foot p {
	padding-top: calc(227 * (100vw / 750));
	line-height: 1.6;
	font-size: calc(20 * (100vw / 750));
	color: #fff;
	text-align: center;
	letter-spacing: -0.01em;
}

.all_btn {
	position: relative;
	margin: calc(-151 * (100vw / 750)) auto 0;
	padding-bottom: calc(1200 * (100vw / 750));
}

.all_btn a {
	width: calc(227* (100vw /750));
	margin: auto;
}

@media screen and (min-width: 768px) {
	.aboutitem.aboutitem_foot {
		background: url(../img/pc/img16.jpg) center / contain no-repeat;
		width: 110rem;
		height: 100rem;
		margin: 7rem auto 0;
	}

	.aboutitem.aboutitem_foot p {
		padding-top: 43.4rem;
		line-height: 1.81;
		font-size: 1.6rem;
		letter-spacing: -0.01em;
	}

	.all_btn {
		margin: -22rem auto 0;
		padding-bottom: 199rem;
	}

	.all_btn a {
		width: 32.7rem;
	}



}



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

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

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

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

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

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

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

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

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

 .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) {
	 .item-area .box08 {
		width: calc(200 * var(--formula));
	}

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

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

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

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

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