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

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

#wrapper {
    overflow: clip;
}

/* -----------------------------
	charm-area
-------------------------------- */
.charm-area{
	margin: 150px 0 0;
}
.charm-block{
	display: flex;
	justify-content: space-between;
	margin: 50px 0 0;
}
.charm-block .box{
	width: calc((100% / 3) - 20px);
}
.charm-block .box > div{
	position: relative;
}

.charm-block .box > div .catch-s{
	background: #fff;
	position: absolute;
	top: -40px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	padding: 5px 20px 0;
	height: 45px;
	border-radius: 5px 5px 0 0;
}
.charm-block .box > div .catch-m{
	text-align: center;
	padding: 20px 0 0;
}
.charm-block .box > div .basic-txt{
	padding: 20px 0 0;
}
.charm-block .box img{
	width: 100%;
}
.comparison-block{
	margin: 100px 0 0;
	text-align: center;
}
.comparison-block .catch-m{
	padding: 20px 0 0;
}
@media screen and (max-width: 768px){
	.charm-area{
		margin: 50px 0 0;
	}
	.charm-block{
		flex-direction: column;
		gap: 20px;
		margin: 20px 0 0;
	}
	.charm-block .box{
		width: 100%;
	}
	.charm-block .box > div{
	}

	.charm-block .box > div .catch-s{
	}
	.charm-block .box > div .catch-m{
	}
	.charm-block .box > div .basic-txt{
	}

	.comparison-block{
		margin: 20px 0 0;
	}
	.comparison-block img{
		margin: 20px 0 0;
	}
	.comparison-block .catch-m{
	}
}
/* -----------------------------
	support-area
-------------------------------- */
.support02-area{
	margin: 150px 0 0;
}
.support02-area .txt-area .catch-l{
	padding: 30px 0 0;
}
.support02-area .txt-area .basic-txt{
	padding: 30px 0 0;
}

.support02-area .container .ttl-s {
	position: relative;
	padding: 0;
}
.support02-area .container .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);
}
.support02-area .container .ttl-s .jp {
    font-size: 2rem;
    color: var(--gold);
	background: #fff;
	padding: 0 20px 0 0;
	position: relative;
	display: table;
}

.support02-area .wrap{
width:100%;
margin:0 auto;
text-align:center;
padding:0 0;
position: relative;
display: flex;
justify-content: space-between;
position: relative;
background: #fff;
}

/*コンテンツ*/
.support02-area .container {
width: 45%;
}
.support02-area .container div {
padding-top: 20vh;
padding-right:10vh
}
.support02-area .container div:last-child {
padding-bottom: 20vh;
}
.support02-area .container div h2 { 
font-size: 3rem; 
text-align:left;
}
.support02-area .container div p {
margin-top: 30px;
text-align:left;
line-height:170%;
	line-height: 2.2;
}

/*イメージ*/
.support02-area figure{
	display: none;
}
.support02-area .images-container {
width: 60%;
height: 100vh;
display: flex;
align-items: center;
position: sticky;
position: -webkit-sticky;
top:100px;
	margin: 0 50px 0 0;
	min-height: 770px;
}
.support02-area .images-container img {
max-width: 100%;
height: auto;
}
.support02-area .images-container p {
height:650px;
margin: auto;
display: block;
visibility: hidden;
position: absolute;
top: 0;
bottom: 0;
transition: .8s !important;
opacity: 0;
}
.support02-area .images-container p:first-child,
.support02-area .images-container p.active {
visibility: visible;
opacity: 1;
}


@media screen and (max-width: 768px){
	.support02-area{
		margin: 50px 0 0;
	}

	.support02-area .txt-area .catch-l{
		padding: 20px 0 0;
	}
	.support02-area .txt-area .basic-txt{
		padding: 20px 0 ;
	}
	/*コンテンツ*/
	.support02-area .container {
	width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
	}
	.support02-area .container div {
		padding: 0;
	}
	.support02-area .container div:last-child {
	padding: 0;
	}
	.support02-area .container > div > div{
		padding: 20px 20px 0!important;
	}
	.support02-area .container div h2 { 

	}
	.support02-area .container div p {
		margin: 10px 0 0;
		line-height: 2.2;
	}
	.support02-area .container div .catch-m{
		font-size: 2.6rem;
	}
	.support02-area figure{
		display: block;
	}
	.support02-area .images-container {
		display: none;
	}
}