@charset "utf-8";

.concept-title-area .title01 strong {
    margin: 0;
}

/*===========================================================
concept01
===========================================================*/

.concept01 {
    max-width: 192rem;
    width: 100%;
    margin: 13rem auto 0;
    padding: 10rem 0;
    position: relative;
	background: url(../../../../uploads/in_concept_about_bg01.jpg)center / cover no-repeat;
}

.concept01::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--translucent-black);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 1;
}

.concept01-area {
    max-width: 78rem;
    width: 100%;
    margin: 0 auto;
	position: relative;
	z-index: 2;
}

.concept01-title-box {
    text-align: center;
}

.concept01-illust-box {
    max-width: 50.1rem;
    width: 100%;
    margin: 1.7rem 0 0 3.4rem;
}

.concept01-text-area {
    margin: 3rem auto 0;
	max-width: 70rem;
	width: 100%;
    text-align: center;
}

.concept01-text-box02 {
    margin: 3rem 0 0;
}

/*===========================================================
concept02
===========================================================*/

.concept02 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 15rem 0 0 1.5rem;
}

.concept02-container {
    max-width: 157rem;
    width: 100%;
    margin: 0 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.concept02-left {
    max-width: 93.4rem;
    width: 60%;
}

.concept02-title-frame {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto 0 0;
}

.concept02-title-container {
    margin: 13% 0 0;
    max-width: 54.6rem;
    width: 100%;
    display: flex;
}

.concept-number-text {
    font-size: 9rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    opacity: 0.3;
}

.concept-number-text01 {
    margin: -10% 0 0;
}

.concept-title-area {
    margin: 0 0 0 -7rem;
}

.concept02-title-box01 .title01 strong {
    margin-left: 0;
}

.concept02-title-box02 {
    margin: 3rem 0 0 7.7rem;
}

.concept02-img-box01 {
    max-width: 35rem;
    width: 100%;
}

.concept02-text-area {
    margin: 7rem 0 0;
    max-width: 52rem;
    width: 100%;
}

.concept02-right {
    margin: 0 0 -7% -44rem;
    max-width: 89.4rem;
    width: 57%;
}

.concept02-img-box02 {
    margin: 0 0 0 auto;
    max-width: 68.7rem;
    width: 76.8%;
}

.concept02-img-box03 {
    margin: -15rem 0 0;
    max-width: 55.4rem;
    width: 62%;
}

/*===========================================================
concept03
===========================================================*/

.concept03 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 22.5rem 0 0;
}

.concept03-container {
    max-width: 157rem;
    width: 100%;
    margin: 0 0 0 auto;
}

.concept03-area {
    max-width: 138.1rem;
    width: 100%;
}

.concept03-img-box {
    max-width: 123rem;
    width: 100%;
    position: relative;
}

.concept03-img-box::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(51, 51, 51, 0)22%, rgba(0, 0, 0, 0.86)60%);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

.concept03-text-frame {
    max-width: 77.1rem;
    width: 57%;
    margin: -27.6% 0 0 auto;
	position: relative;
	z-index: 2;
}

.concept03-title-container {
    display: flex;
}

.concept03-title-box02 {
    margin: 3rem 0 0;
}

.concept-number-text02 {
    margin: -7% 0 0;
}

.concept03-text-box {
    margin: 7rem 0 0;
}

/*===========================================================
concept04
===========================================================*/

.concept04 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 23.3rem 1.5rem 0;
}

.concept04-container {
    max-width: 123.5rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.concept04-text-frame {
    max-width: 61rem;
    width: 50%;
}

.concept04-title-container {
    display: flex;
    align-items: center;
}

.concept04-text-box {
    margin: 4rem 0 0;
}

.concept04-img-mask-box {
    max-width: 58.4rem;
    width: 48%;
    display: grid;
}

.concept04-img-box {
    width: 100%;
    mask-image: url(concept.css);
    mask-repeat: no-repeat;
    mask-position: 0;
    mask-size: auto 100%;
    -webkit-mask-image: url(../../../../uploads/in_concept_about_mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0;
    -webkit-mask-size: auto 100%;
}

/*===========================================================
concept05
===========================================================*/

.concept05 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 13rem 0 0;
}

.concept05-container {
    max-width: 123.5rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
}

.concept05-img-box {
    max-width: 68.4rem;
    width: 55.4%;
	align-self: flex-start;
	position: relative;
}

.concept05-img-box::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(51, 51, 51, 0) 57%, rgba(0, 0, 0, 0.86) 100%);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	pointer-events: none;
}

.concept05-img-box img{
	display: block;
	width: 100%;
	height: auto;
}

.concept05-text-frame {
    margin: 2rem 0 0 -15rem;
    max-width: 69.3rem;
    width: 100%;
	position: relative;
	z-index: 1;
}

.concept05-title-container {
    display: flex;
    align-items: center;
}

.concept05-text-box {
    max-width: 41.8rem;
    width: 100%;
    margin: 0 0 0 auto;
}

/*===========================================================
concept06
===========================================================*/

.concept06 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 15rem 0;
}

.concept06-container01 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 11.5rem 1.5rem;
	background: url(../../../../uploads/in_concept_kyomachi_bg01.jpg)center / cover no-repeat;
	align-self: flex-start;
    position: relative;
}

.concept06-container01::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to left, rgba(51, 51, 51, 0) 57%, rgba(0, 0, 0, 0.86) 90%);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	pointer-events: none;
}

.concept06-title-area {
    max-width: 123rem;
    width: 100%;
    margin: 0 auto;
	position: relative;
	z-index: 1;
}

.concept06-title-area .title01 strong {
    margin-left: 0;
}

.concept06-title-box02 {
    margin: 3rem 0 0 6rem;
}

.concept06-container02 {
    max-width: 125rem;
    width: 100%;
    margin: 7rem auto 0;
    padding: 0 1.5rem;
}

.concept06-img-area {
    margin: 4rem 0 0 auto;
    max-width: 107.2rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.concept06-img-box01 {
    margin: 9rem 0 0;
    max-width: 30rem;
    width: 100%;
}

.concept06-img-box02 {
    max-width: 43rem;
    width: 100%;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1920px) {


/*===========================================================

===========================================================*/



}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1024px) {


/*===========================================================
concept02
===========================================================*/

	.concept02-left {
		width: 100%;
	}

	.concept02-right {
		margin: 0 0 18% -44rem;
		width: 46%;
	}

/*===========================================================
concept03
===========================================================*/

	.concept03-text-frame {
		padding: 0 1.5rem 0 0;
	}

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 768px) {


/*===========================================================
concept01
===========================================================*/

	.concept01 {
		background: url(../../../../uploads/in_concept_about_sp_bg01.jpg)center / cover no-repeat;
	}

	.concept01-title-box .title01 strong {
		font-size: 3.2rem;
	}

/*===========================================================
concept02
===========================================================*/

	.concept02 {
		padding: 6rem 2.5rem 0;
	}

	.concept02-title-frame {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.concept02-img-box01 {
		margin: 4rem 0 0;
	}

	.concept02-container {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.concept02-text-area {
		margin: 5rem 0 0;
		max-width: 100%;
	}

	.concept02-right {
		margin: 4rem 0 0;
		width: 100%;
	}

/*===========================================================
concept03
===========================================================*/

	.concept03 {
		padding: 8rem 0 0;
	}

	.concept03-text-frame {
		display: contents;
	}

	.concept03-title-container {
		max-width: 53rem;
		margin: 0 auto;
		order: 1;
	}

	.concept03-area {
		display: grid;
	}

	.concept03-img-box {
		margin: 4rem 0 0;
		order: 2;
	}

	.concept03-text-box {
		margin: 4rem 0 0;
		padding: 0 2.5rem;
		order: 3;
	}

/*===========================================================
concept04
===========================================================*/

	.concept04 {
		padding: 8rem 2.5rem 0;
	}

	.concept04-container {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.concept04-text-frame {
		display: contents;
	}

	.concept04-title-container {
		order: 1;
	}

	.concept04-img-mask-box {
		margin: 4rem 0 0;
		width: 100%;
		order: 2;
	}

	.concept04-text-box {
		order: 3;
	}

/*===========================================================
concept05
===========================================================*/

	.concept05 {
		padding: 6rem 0 0;
	}

	.concept05-container {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.concept05-img-box {
		width: 100%;
		margin: 4rem auto 0;
		order: 2;
	}

	.concept05-text-frame {
		display: contents;
	}

	.concept05-title-container {
		order: 1;
	}

	.concept05-text-box {
		margin: 4rem 0 0;
		padding: 0 1.5rem;
		max-width: 100%;
		width: 100%;
		order: 3;
	}

/*===========================================================
concept06
===========================================================*/

	.concept06 {
		padding: 6rem 0 0;
	}

	.concept06-img-box01 {
		width: 30%;
	}

	.concept06-img-box02 {
		width: 60%;
	}

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 576px) {


/*===========================================================
concept01
===========================================================*/

	.concept01 {
		margin: 6rem auto 0;
		padding: 6rem 1rem;
	}

	.concept01-title-box .title01 strong {
		font-size: 2rem;
	}

	.concept01-illust-box {
		margin: 0 0 0 4rem;
		max-width: 30rem;
	}

	.concept01-text-area {
		margin: 0 auto;
	}

	.concept01-text-box02 {
		margin: 1rem 0 0;
	}

/*===========================================================
concept02
===========================================================*/

	.concept-number-text {
		font-size: 7rem;
	}

	.concept-title-area {
		margin: 0 0 0 -5rem;
	}

	.concept02-title-box02 {
		margin: 1rem 0 0 2rem;
	}

/*===========================================================
concept03
===========================================================*/

	.concept03-title-box02 {
		margin: 1rem 0 0;
	}

/*===========================================================
concept04
===========================================================*/

	.concept04 {
		padding: 4rem 2.5rem 0;
	}

/*===========================================================
concept06
===========================================================*/

	.concept06-container01 {
		padding: 6rem 2.5rem;
	}

	.concept06-title-box02 {
		margin: 1rem 0 0 6rem;
	}

}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 414px) {


/*===========================================================
concept01
===========================================================*/

	.concept01-title-box .title01 strong {
		font-size: 1.7rem;
	}

}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */