@charset "UTF-8";

/* Copy from Landing Page */
.title { display: flex; flex-direction: column; align-items: center; gap: 0.5em; margin-bottom: 1em; text-align: center;}
.title i { min-width: 109px; padding: 0.3em 0; border-top: 2px solid #333; border-bottom: 2px solid #333; font-size: clamp(1.6rem,1.8vw,1.8rem);}
.title i.green { padding: 0; border: none;}
.title .border { padding-top: 0.8em; border-top: 1px solid #333;}

.center { text-align: center!important;}
.lh { line-height: 2;}
.green { color: #42A900 !important;}

.balloon { position: relative; margin-bottom: 16px; padding: 0.5em 2em; background: #42A900; border-radius: 40px; font-size: clamp(1.9rem,2.2vw,2.2rem); color: #FFF;}
.balloon::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width:0; height:0; border-style:solid; border-width: 16px 8px 0 8px; border-color: #42A900 transparent transparent transparent;}
.serif { display: flex; justify-content: center; align-items: center; gap: 16px; font-size: clamp(2rem,2.4vw,2.4rem); color: #42A900;}
.serif::before, .serif::after { content: ''; display: block; width: 2px; height: 1em; background: #42A900;}
.serif::before { transform: rotate(-30deg);}
.serif::after { transform: rotate(30deg);}

.bold { font-weight: 700;}
.col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px;}
.deco01 { position: absolute; top: 0; left: 0; z-index: -1; width: 150px;}

.trick .swiper { overflow: visible;}
.trick h3 { margin-top: 1em;}
.trick p { margin: 0 5%;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { position: relative; margin-top: 24px;}
.swiper-pagination-bullet-active { background: #42A900;}

/*.present,*/
.sec_present .inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 30px 50px; max-width: 900px; padding: 80px 5%; background: #FFF;
position: relative;
width: min(800px, 90%);
box-shadow: 0 4px 4px rgba(0, 0, 0, .25);}
.deco02 { position: absolute; top: -50px; right: -110px; width: 220px;}
.deco03 { position: absolute; bottom: -40px; left: -120px; width: 180px;}

.sp { display: none;}

.home .sec_top_overview h2,
.concept .sec_idea h3,
.concept .sec_everyone h2,
.concept .sec_trick h2,
.concept .sec_present h2 {
	margin-bottom: 1em; font-size: clamp(2.4rem,3.2vw,3.2rem);
	font-weight: 700;
}

.concept .sec_everyone h2 .serif {
	margin-left: -30px;
}

.concept .sec_everyone .deco01 {
	z-index: 2;
}

.concept .trick .swiper { overflow: visible;}
.concept .trick h3 {
	/* margin-top: 1em; */
	margin: 1em 0 .5em;
	font-size: clamp(2rem,2.4vw,2.4rem);
	font-weight: 700;
}
.concept .trick p {
	margin: 0 5%;
	font-size: 1.6rem;
	line-height: 1.6;
}
.concept .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { position: relative; margin-top: 24px;}
.concept .swiper-pagination-bullet-active { background: #42A900;}

.concept .btn a { display: flex; justify-content: center; gap: 8px; padding: 0.5em 2em; text-align: center; background: #FF8800; border-radius: 40px; font-size: clamp(1.6rem,1.8vw,1.8rem); font-weight: 500; color: #FFF; white-space: nowrap;}

@media screen and (max-width: 1023px) {
    .col { grid-template-columns: 1fr;}
		.sp { display: block;}
		.pc { display: none;}

		.concept .sec_everyone .deco01 {
			top: -40px;
			width: 90px;
		}
		.concept .sec_present .deco02 {
			right: -20px;
			width: 140px;
		}
		.concept .sec_present .deco03 {
			left: -20px;
			width: 120px;
		}
}

@media screen and (max-width: 820px) {
	.concept .sec_everyone h2 .serif {
		margin-left: -20px;
	}
}