@charset "utf-8";
/* -----------------------------------------------------------
    about
-------------------------------------------------------------- */

.no-wrap{
    white-space: nowrap;
}

#wrapper {
    overflow: clip;
}

/* -----------------------------
	intro-area
-------------------------------- */
.intro-area{
	margin: 100px 0 0;
}
.intro-area .inner .block{
	display: flex;
	position: relative;
	justify-content: space-between;
	flex-direction: row-reverse;
}
.intro-area .inner:nth-child(2){
	align-items: center;
	padding: 100px 0 0;
}
.intro-area .inner figure{
	position: relative;
	margin-right: calc(50% - 50vw);
	margin-left: 100px;
}
.intro-area .inner figure img{
}
.intro-area .txt-area .catch-s{
	padding: 30px 0 0;
}
.intro-area .txt-area .catch-l{
	padding: 0 0 0;
}
.intro-area .txt-area .basic-txt{
	padding: 30px 0 0;
}

@media screen and (max-width: 1600px){
	.intro-area .inner{
	}
	.intro-area .inner figure{
		margin-left: 50px;
	}
	.intro-area .inner figure img{
		width: 50vw;
	}
}

@media screen and (max-width: 768px){
	.intro-area{
		margin: 50px 0 0;
	}
	.intro-area .inner .block{
		flex-direction: column;
		gap: 20px;
	}
	.intro-area .inner:nth-child(2){
		flex-direction: column;
		padding: 30px 0 0;
		gap: 40px;
	}
	.intro-area .inner figure{
		margin: 0;
	}
	.intro-area .inner figure img{
		width: 100%;
	}
	.intro-area .inner:nth-child(2) img{
	}

	.intro-area .txt-area .catch-s{
		padding: 20px 0 0;
	}
	.intro-area .txt-area .catch-l{
		padding: 0 0 0;
	}
	.intro-area .txt-area .basic-txt{
		padding: 10px 0 0;
	}
	
	.intro-area .inner:nth-child(2) .txt-area{
		padding: 0 20px;
	}
}

/* -----------------------------
	flow-area
-------------------------------- */
.stepbar .stepbarwrap .steptitle .title{
	color: var(--gold);
}
.stepbar .basic-txt{
	padding: 20px 0 0;
	display: block;
}
.stepbarwrap .ttl-s{
	position: relative;
	margin: 20px 0 0;
}
.stepbarwrap .ttl-s::before{
	content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    border-top: 1px dashed var(--gold);
}
.stepbarwrap .ttl-s .jp{
	font-size: 1.8rem;
    color: var(--gold);
    background: var(--light-gray);
    padding: 0 20px 0 0;
    position: relative;
    display: table;
}
.perspective-list{ 
	display: flex;
	justify-content: space-between;
	margin: 10px 0 0;
	flex-wrap: wrap;
}
.perspective-list a{
	width: calc((100% / 4) - 10px);
	position: relative;
}
.perspective-list a img{
	width: 100%;

}
.perspective-list a::before{
	content: "\f002";
    font: 900 1.5rem / 1 var(--webicon);
    right: 0;
    position: absolute;
    background: #333;
	color: #fff;
    z-index: 3;
	width: 25px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 768px){
	.stepbar .basic-txt{
		padding: 10px 0 0;
	}
	.perspective-list{
		gap:10px;
	}
	.perspective-list a{
		width: calc((100% / 2) - 5px);
	}
}

/* -----------------------------
	charm-area
-------------------------------- */
.charm-area{
	margin: 150px 0 0;
	background: var(--light-gray);
	padding: 100px 0;
}
.charm-block{
	margin: 50px 0 0;
	display: flex;
	flex-direction: column;
	gap: 50px;
}
.charm-block .box{
	display: flex;
	align-items: center;
	gap: 50px;
	background: #fff;
	padding: 50px;
}
.charm-block .box:nth-child(even){
	flex-direction: row-reverse;
}
.charm-block .box .catch-m{
	padding: 20px 0 0;
}
.charm-block .box .basic-txt{
	padding: 20px 0 0;
}
.charm-block .box img{
	width: 450px;
}
@media screen and (max-width: 768px){
	.charm-area{
		padding: 50px 0;
		margin: 50px 0 0;
	}
	.charm-block{
		margin: 20px 0 0;
		gap: 20px;
	}
	.charm-block .box{
		flex-direction: column;
		padding: 15px;
		gap: 10px;
	}
	.charm-block .box:nth-child(even){
		flex-direction: column;
		padding: 15px;
		gap: 10px;
	}
	.charm-block .box .catch-m{
		padding: 10px 0 0;
	}
	.charm-block .box .basic-txt{
		padding: 10px 0 0;
	}
	.charm-block .box img{
		width: 100%;
	}
}