@charset "utf-8";
.float_bnr{position:fixed; bottom: 40px; right: 20px; z-index: 5;}
.float_bnr .floatingBnr_close { width: 30px; height: 30px; border-radius: 50%; background: #000; position: absolute; top: -10px; right: -10px; z-index: 11; display: flex; justify-content: center; align-items: center; }
.float_bnr .floatingBnr_close::after { content: "×"; color: #fff; line-height: 1; font-size: 20px; font-weight: bold; }
.float_bnr .floatingBnr_close:hover { cursor: pointer; opacity: 0.5; }

@media screen and (max-width: 640px){
	.float_bnr{left: 0; right: 0; text-align: center;}
	.float_bnr .floatingBnr_close{right: 5px;}
}

/* mainvisual ==========================*/
#mainvisual{max-height: 900px; height: calc(100vh - 70px);
	background: url(../../img/page/top/back_mv.png); position: relative; overflow: hidden;}
#mv_copy{position: absolute; top: 50%; left: 0; right: 0;
	max-width: 1200px; width: 100%; margin: 0 auto;
	z-index: 3; transform: translateY(-50%);}
#mv_copy .mv_copy_text + .mv_copy_text{margin-top: 7px;}
#mv_copy span{position: relative; display: inline-block; padding: 0 8px;}
#mv_copy .mv_copy_text span::before{content: ""; position: absolute; top: 0; left: 0; z-index: 3;
	width: 0; height: 100%; background: #004aad;}
#mv_copy .mv_copy_text span::after{content: ""; position: absolute; top: 0; left: 0; z-index: 1;
	width: 100%; height: 100%; background: #000;
	opacity: 0;}
#mv_copy span b{font-family: 'Oswald', sans-serif; color: #fff; font-size: 150px; line-height: 1;
	position: relative; z-index: 2;
	opacity: 0;}

.arrow-down{position: absolute; bottom: 20px; left: 0; right: 0; z-index: 3; text-align: center; transition: 0.3s ease;}
.arrow-down i{font-size: 40px; animation: arrow-down 0.5s ease-in alternate infinite;}
@keyframes arrow-down{
	0%{transform: translateY(0);}
	100%{transform: translateY(10px);}
}

.mask{position: absolute; top: 0; left: 0; right: 0; margin: auto; transform: translate(-6%, -30%); width: 120%; opacity: 0;}
.cls{stroke: #fff; fill: none; stroke-linecap: round; stroke-linejoin: round;}
.cls-1{stroke-width: 270px; transform: translate(-4%, 0);}
.cls-2{stroke-width: 300px; transform: translate(7%, 15%);}
.cls-3{stroke-width: 400px; transform: translate(-10%, -5%) scale(1.2);}

@media screen and (max-width: 1650px){
	#mainvisual{height: 50vw;}
	.mask{width: 130vw;}
}
@media screen and (max-width: 1300px){
	#mv_copy{padding: 0 20px}
	#mv_copy span b{font-size: 10vw;}
	.mask{transform: translate(-6%, -34%);}
}
@media screen and (max-width: 960px){
	.mask{transform: translate(-6%, -41%);}
	
}
@media screen and (max-width: 640px){
	#mainvisual{height: 70vw;}
	.arrow-down i{font-size: 15px;}
	.mask{width: 140vw; transform: translate(-7%, -42%);}
	#mv_copy .mv_copy_text + .mv_copy_text{margin-top: 2px;}
	#mv_copy span{line-height: 1.4; padding: 5px 8px;}
	#mv_copy span b{display: inline-block;}
}

/* 動作 */
#mainvisual.scene1 .mask{opacity: 1;}
#mainvisual.scene2 .mv_copy_text:nth-child(1) span::before{animation: mask .8s ease .9s 1 normal forwards;}
#mainvisual.scene2 .mv_copy_text:nth-child(1) span::after,
#mainvisual.scene2 .mv_copy_text:nth-child(1) span b{animation: txtIn .1s ease 1.3s 1 normal forwards;}

#mainvisual.scene3 .mv_copy_text:nth-child(2) span::before{animation: mask .8s ease .9s 1 normal forwards;}
#mainvisual.scene3 .mv_copy_text:nth-child(2) span::after,
#mainvisual.scene3 .mv_copy_text:nth-child(2) span b{animation: txtIn .1s ease 1.3s 1 normal forwards;}

#mainvisual.scene4 .mv_copy_text:nth-child(3) span::before{animation: mask .8s ease .9s 1 normal forwards;}
#mainvisual.scene4 .mv_copy_text:nth-child(3) span::after,
#mainvisual.scene4 .mv_copy_text:nth-child(3) span b{animation: txtIn .1s ease 1.3s 1 normal forwards;}

/* top_trends ==========================*/
#top_trends{background: #F5F2F2; padding: 80px 0 60px;}
.top_trends_more{text-align: center; font-size: 20px; margin-top: -10px;}
.top_trends_more span{font-weight: 700;}

.trends_wrap{margin-left: -37px; margin-right: -37px;}
.trends_box{width: calc(100% / 3); padding: 0 37px; margin-bottom: 60px;}
.trends_box a{display: block; background: #fff; height: 100%;}
.trends_img{position: relative; overflow: hidden;}
.trends_imgbox{width: 100%; height: 250px; transition: 0.3s ease-in;}
.trends_imgbox::before{content: ""; position: absolute; top: 0; left: 0; z-index: 2;
	width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: block; transition: 0.3s ease-in;}
.trends_img span{position: absolute; bottom: 0; left: 0; z-index: 3;
	font-size: 14px; line-height: 1; padding: 8px; color: #fff; background: #004AAD;}
.trends_box a:hover{opacity: 1;}
.trends_box a:hover .trends_imgbox{transform: scale(1.03);}
.trends_box a:hover .trends_imgbox::before{opacity: 0;}
.trends_text{padding: 20px;}
.trends_text h3{font-size: 16px; line-height: 1.7; margin-bottom: 15px;}
.trends_text p{}
.trends_text h3,
.trends_text p{overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}



#top_trends .trends_box:nth-child(1){width: calc(100% / 2); padding-right: 50px;}
#top_trends .trends_box:nth-child(2){width: calc(100% / 2); padding-left: 50px;}
#top_trends .trends_box:nth-child(1) .trends_imgbox,
#top_trends .trends_box:nth-child(2) .trends_imgbox{height: 350px;}
#top_trends .trends_box:nth-child(1) .trends_text h3,
#top_trends .trends_box:nth-child(2) {font-size: 20px;}
#top_trends .trends_box:nth-child(1) .trends_text p,
#top_trends .trends_box:nth-child(2) {font-size: 14px;}

@media screen and (max-width: 1274px){
	.trends_wrap{margin-left: -15px; margin-right: -15px;}
	.trends_box{padding: 0 15px; margin-bottom: 30px;}
	#top_trends .trends_box:nth-child(1){padding-right: 15px;}
	#top_trends .trends_box:nth-child(2){padding-left: 15px;}
}
@media screen and (max-width: 640px){
	#top_trends{padding: 40px 0 30px;}
	.trends_box{width: 100%;}
	.trends_imgbox{height: 170px;}
	.trends_img span{font-size: 12px;}
	.trends_text{padding: 15px;}
	.trends_text h3{font-size: 14px; margin-bottom: 10px;}

	#top_trends .trends_box:nth-child(1),
	#top_trends .trends_box:nth-child(2){width: 100%; padding-left: 0; margin-right: 0; padding: 0 15px;}
	#top_trends .trends_box:nth-child(1) .trends_imgbox,
	#top_trends .trends_box:nth-child(2) .trends_imgbox{height: 170px;}
	#top_trends .trends_box:nth-child(1) .trends_text h3,
	#top_trends .trends_box:nth-child(2) {font-size: 14px;}
	#top_trends .trends_box:nth-child(1) .trends_text p,
	#top_trends .trends_box:nth-child(2) {font-size: 12px;}
}


/* top_case ==========================*/
#top_case{background: #F5F2F2; padding: 85px 0 100px;}
.top_case_bnr{}
.top_case_bnr a{display: block; position: relative; overflow: hidden;}
.top_case_bnr a::before{content: ""; position: absolute; top: 0; left: 0; z-index: 2;
	width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: block; transition: 0.3s ease-in;}
.top_case_bnr h2{position: absolute; top: 50%; left: 30px; transform: translateY(-50%); z-index: 3; color: #fff; font-size: 18px;}
.top_case_bnr h2 b{font-size: 40px; vertical-align: middle; padding-right: 30px; margin-top: -8px; display: inline-block;}
.top_case_arrow{position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 3; background: #000; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center;}
.top_case_arrow i{color: #fff; font-size: 30px;}
.top_case_bnr img{transition: 0.3s ease-in;}
.top_case_bnr a:hover{opacity: 1;}
.top_case_bnr a:hover:before{opacity: 0;}
.top_case_bnr a:hover img{transform: scale(1.03);}

@media screen and (max-width: 960px){}
@media screen and (max-width: 640px){
	#top_case{padding: 42px 0 50px;}
	.top_case_bnr h2{left: 20px;}
	.top_case_bnr h2{font-size: 14px; line-height: 1.5;}
	.top_case_bnr h2 b{font-size: 22px; padding: 0; display: block;}
	.top_case_arrow{width: 40px; height: 40px;}
	.top_case_arrow i{font-size: 20px;}

}

/* top_consulting ==========================*/
#top_consulting{background: #FFFFFF; padding: 65px 0 45px;}
#top_consulting .title_style01{margin-bottom: 40px;}
.consulting_wrap{margin-left: -20px; margin-right: -20px;}
.consulting_box{width: calc(100% / 4); padding: 0 20px; margin-bottom: 30px;}
.consulting_box a{display: block; background: #fff; text-align: center; padding: 25px 15px;}
.consulting_box figure{width: 180px; height: 180px; border-radius: 50%; border: 5px solid #EFEFEF; margin: 0 auto; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.consulting_box p{font-size: 14px; font-weight: 500; margin-top: 5px;}

@media screen and (max-width: 1240px){
	.consulting_wrap{margin-left: -15px; margin-right: -15px;}
	.consulting_box{padding: 0 15px;}
}
@media screen and (max-width: 1000px){
	.consulting_box figure{width: 150px; height: 150px;}
}
@media screen and (max-width: 960px){
	.consulting_wrap{margin-left: -10px; margin-right: -10px;}
	.consulting_box{padding: 0 10px;}
	.consulting_box a{padding: 25px 10px;}
	.consulting_box figure{width: 110px; height: 110px;}
}
@media screen and (max-width: 640px){
	#top_consulting{padding: 32px 0 25px;}
	#top_consulting .title_style01{margin-bottom: 20px;}

	.consulting_box{width: calc(100% / 2); margin-bottom: 20px;}
}


/* top_news ==========================*/
#top_news{padding: 50px 0;}

.news_wrap{}
.news_box + .news_box{margin-top: 15px;}
.news_box a{display: block; background: #F5F2F2; overflow: hidden; position: relative; padding: 14px 0;}
.news_box a::before{content: ""; position: absolute; top: 0; left: 0;
	width: 0; height: 100%; background: #000; transition: 0.3s ease-in;}
.news_box a:hover{opacity: 1;}
.news_box a:hover::before{width: 100%;}
.news_inner{position: relative; z-index: 2; transition: 0.3s ease;}
.news_box a:hover .news_inner{color: #fff;}
.news_inner{align-items: center;}
.news_day{font-size: 14px; padding: 0 20px; width: 130px; text-align: center;}
.news_inner p{width: calc(100% - 130px); padding-right: 50px;}
.news_arrow{position: absolute; top: 50%; right: 22px; transform: translateY(-50%);}
.news_arrow i{font-size: 18px;}

@media screen and (max-width: 960px){}
@media screen and (max-width: 640px){
	#top_news{padding: 30px 0;}
	
	.news_box a{padding: 0;}
	.news_inner{padding: 15px 20px;}
	.news_day{width: 100%; text-align: left; padding: 0;}
	.news_inner p{width: 100%; padding: 0;}
	.news_arrow{right: 5px;}
	.news_arrow i{font-size: 14px;}
}


/* top_philosophy ==========================*/
#top_philosophy{background: #F5F2F2; padding: 65px 0 40px;}

.philosophy_wrap{justify-content: space-between; margin-left: -20px; margin-right: -20px;}
.philosophy_box{width: calc(100% / 2); padding: 0 20px; margin-bottom: 40px;}
.philosophy_box a{}
.philosophy_text{width: 50%; background: #fff; display: flex; align-items: center; padding: 15px;}
.philosophy_text span{font-size: 14px; font-weight: 500;}
.philosophy_img{width: 50%; height: 200px; position: relative;}
.philosophy_img::before{content: ""; position: absolute; top: 0; left: 0; z-index: 2;
	width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: block; transition: 0.3s ease-in;}
.philosophy_box a:hover{opacity: 1;}
.philosophy_box a:hover .philosophy_img::before{opacity: 0;}

@media screen and (max-width: 1240px){
	.philosophy_wrap{margin-left: -15px; margin-right: -15px;}
	.philosophy_box{padding: 0 15px; margin-bottom: 30px;}
}
@media screen and (max-width: 960px){}
@media screen and (max-width: 640px){
	#top_philosophy{padding: 32px 0 20px;}
	
	.philosophy_box{width: 100%; margin-bottom: 15px;}
	.philosophy_img{height: 150px;}
}


/* top_expert ==========================*/
#top_expert{padding: 60px 0 50px;}
#top_expert .title_style01{margin-bottom: 40px;}

.expert_wrap{margin-left: -12px; margin-right: -12px;}
.expert_box{width: calc(100% / 4); padding: 0 12px; margin-bottom: 24px;}
.expert_box a{display: block;}
.expert_img{width: 100%; aspect-ratio: 1 / 1; overflow: hidden;}
.expert_img_inner{width: 100%; height: 100%; position: relative; transition: 0.3s ease-in;}
.expert_img_inner::before{content: ""; position: absolute; top: 0; left: 0; z-index: 2;
	width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: block; transition: 0.3s ease-in;}
.expert_box a:hover{opacity: 1;}
.expert_box a:hover .expert_img_inner{transform: scale(1.03);}
.expert_box a:hover .expert_img_inner::before{opacity: 0;}
.expert_title{font-size: 18px; font-weight: 700; line-height: 1.2; margin: 10px 0 2px;}
.expert_name{}
.expert_mark{font-size: 14px; font-weight: 600; color: #e9930c;}
.expert_mark::before{content: "\f005";
    font-family: "Font Awesome 6 Free"; font-size: 12px; font-weight: 900; margin-right: 5px;}

@media screen and (max-width: 960px){
	.expert_wrap{margin-left: -10px; margin-right: -10px;}
	.expert_box{padding: 0 10px;}
}
@media screen and (max-width: 640px){
	#top_expert{padding: 30px 0 35px;}
	#top_expert .title_style01{margin-bottom: 20px;}

	.expert_box{width: calc(100% / 2);}
}


/* top_recruit ==========================*/
/* top_recruit（テキスト上乗せ） */
#top_recruit {
  background: #F5F2F2;
  padding: 85px 0 100px;
}

.top_recruit_bnr {
  position: relative;
  overflow: hidden;
}

.top_recruit_bnr a {
  display: block;
  position: relative;
}

/* 画像の上にテキストを重ねる */
.top_recruit_text {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.85);
  padding: 25px;
  border-radius: 6px;
  max-width: 600px;
  color: #000;
}

.top_recruit_text h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
}

.top_recruit_text .label {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.top_recruit_text p {
  font-size: 16px;
  line-height: 1.6;
}

/* 矢印アイコン */
.top_recruit_arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 2;
  background: #000;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top_recruit_arrow i {
  color: #fff;
  font-size: 24px;
}

/* スマホ対応 */
@media screen and (max-width: 640px) {
  #top_recruit {
    padding: 42px 0 50px;
  }

  .top_recruit_text {
    top: 40%;
    left: 5%;
    right: 5%;
    padding: 15px;
    max-width: none;
  }

  .top_recruit_text h2 {
    font-size: 20px;
  }

  .top_recruit_text p {
    font-size: 14px;
  }

  .top_recruit_arrow {
    width: 40px;
    height: 40px;
  }

  .top_recruit_arrow i {
    font-size: 18px;
  }
}




/* top_service ==========================*/
#top_service{background: #F5F2F2; padding: 80px 0 60px;}
.top_service_more{text-align: center; font-size: 20px; margin-top: -10px;}
.top_service_more span{font-weight: 700;}

.service_wrap{margin-left: -37px; margin-right: -37px;}
.service_box{width: calc(100% / 3); padding: 0 37px; margin-bottom: 60px;}
.service_box a{display: block; background: #fff; height: 100%;}
.service_img{position: relative; overflow: hidden;}
.service_imgbox{width: 100%; height: 250px; transition: 0.3s ease-in;}
.service_imgbox::before{content: ""; position: absolute; top: 0; left: 0; z-index: 2;
        width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: block; transition: 0.3s ease-in;}
.service_img span{position: absolute; bottom: 0; left: 0; z-index: 3;
        font-size: 14px; line-height: 1; padding: 8px; color: #fff; background: #004AAD;}
.service_box a:hover{opacity: 1;}
.service_box a:hover .service_imgbox{transform: scale(1.03);}
.service_box a:hover .service_imgbox::before{opacity: 0;}
.service_text{padding: 20px;}
.service_text h3{font-size: 16px; line-height: 1.7; margin-bottom: 15px;}
.service_text p{}
.service_text h3,
.service_text p{overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

#top_service .service_box:nth-child(1){width: calc(100% / 2); padding-right: 50px;}
#top_service .service_box:nth-child(2){width: calc(100% / 2); padding-left: 50px;}
#top_service .service_box:nth-child(1) .service_imgbox,
#top_service .service_box:nth-child(2) .service_imgbox{height: 350px;}
#top_service .service_box:nth-child(1) .service_text h3,
#top_service .service_box:nth-child(2) {font-size: 20px;}
#top_service .service_box:nth-child(1) .service_text p,
#top_service .service_box:nth-child(2) {font-size: 14px;}

@media screen and (max-width: 1274px){
        .service_wrap{margin-left: -15px; margin-right: -15px;}
        .service_box{padding: 0 15px; margin-bottom: 30px;}
        #top_service .service_box:nth-child(1){padding-right: 15px;}
        #top_service .service_box:nth-child(2){padding-left: 15px;}
}
@media screen and (max-width: 640px){
        #top_service{padding: 40px 0 30px;}
        .service_box{width: 100%;}
        .service_imgbox{height: 170px;}
        .service_img span{font-size: 12px;}
        .service_text{padding: 15px;}
        .service_text h3{font-size: 14px; margin-bottom: 10px;}

        #top_service .service_box:nth-child(1),
        #top_service .service_box:nth-child(2){width: 100%; padding-left: 0; margin-right: 0; padding: 0 15px;}
        #top_service .service_box:nth-child(1) .service_imgbox,
        #top_service .service_box:nth-child(2) .service_imgbox{height: 170px;}
        #top_service .service_box:nth-child(1) .service_text h3,
        #top_service .service_box:nth-child(2) {font-size: 14px;}
        #top_service .service_box:nth-child(1) .service_text p,
        #top_service .service_box:nth-child(2) {font-size: 12px;}
}


/* =========================================================
   2026-01 Top LP sections (hero -> services) scoped styles
   ========================================================= */
#lpTop {}

/* layout helpers */
#lpTop .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
#lpTop .section-label{
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 12px;
  color: #004AAD;
  margin-bottom: 10px;
}
#lpTop .section-title{
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.35;
  margin-bottom: 18px;
}

/* Hero */
#lpTop .hero{
  position: relative;
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: center;
  padding: 90px 0 50px;
  color: #fff;
  overflow: hidden;
}
#lpTop .hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(0,74,173,.92), rgba(0,74,173,.70)),
    url("https://www.progrive.co.jp/wp-content/uploads/2025/06/slide1.jpg") center/cover no-repeat;
}
#lpTop .hero-content{
  position: relative;
  z-index: 1;
  width: min(1100px, 92vw);
}
#lpTop .hero-content h1{
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.15;
  margin-bottom: 18px;
  font-weight: 700;
}
#lpTop .hero-content p{
  max-width: 60ch;
  line-height: 1.9;
  opacity: .92;
}

/* About / Challenges / Value */
#lpTop .about,
#lpTop .challenges,
#lpTop .value,
#lpTop .services{
  padding: 80px 0;
  background: #fff;
}
#lpTop .challenges,
#lpTop .services{
  background: #F5F2F2;
}

#lpTop .about-grid,
#lpTop .challenge-grid,
#lpTop .value-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
#lpTop .about-card,
#lpTop .challenge-item,
#lpTop .value-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
#lpTop .about-card h3,
#lpTop .challenge-item h3,
#lpTop .value-card h3{
  font-size: 18px;
  margin-bottom: 8px;
}
#lpTop .about-card p,
#lpTop .challenge-item p,
#lpTop .value-card p{
  color: rgba(0,0,0,.72);
  line-height: 1.8;
}

/* Services: ボタンなど（提供HTMLのclassに合わせる） */
#lpTop .btn-primary{
  display: inline-block;
  background: #004AAD;
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}
#lpTop .btn-primary:hover{ opacity: .9; }

/* responsive */
@media (max-width: 960px){
  #lpTop .about-grid,
  #lpTop .challenge-grid,
  #lpTop .value-grid{
    grid-template-columns: 1fr;
  }
  #lpTop .about,
  #lpTop .challenges,
  #lpTop .value,
  #lpTop .services{
    padding: 54px 0;
  }
}
@media (max-width: 640px){
  #lpTop .hero{ min-height: calc(100vh - 50px); padding-top: 70px; }
}


/* =========================================================
   LP TOP (Hero -> Services) styles  ※#lpTop内だけに作用
   ========================================================= */

/* base */
#lpTop{
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  line-height: 1.8;
  overflow-x: hidden;
}
#lpTop *{ box-sizing: border-box; }

/* layout */
#lpTop .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* type scale（視認性バランス） */
#lpTop .section-label{
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .12em;
  font-size: 14px;
  color: #004AAD;
  text-align: center;
  margin-bottom: 10px;
}
#lpTop .section-title{
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.35;
  margin-bottom: 28px;
  color: #1f3a5f;
  text-align: center;
  font-weight: 700;
}

/* sections */
#lpTop .about,
#lpTop .challenges,
#lpTop .value,
#lpTop .services{
  padding: 84px 0;
  background: #fff;
}
#lpTop .challenges{ background: #f9fafb; }
#lpTop .value{ background: #f9fafb; }

/* -----------------
   Hero
----------------- */
#lpTop .hero{
  position: relative;
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: center;
  padding: 110px 0 70px;
  color: #fff;
  overflow: hidden;
}
#lpTop .hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(0,74,173,.92), rgba(0,74,173,.70)),
    url("https://www.progrive.co.jp/wp-content/uploads/2025/06/slide1.jpg") center/cover no-repeat;
}
#lpTop .hero-content{
  position: relative;
  z-index: 1;
  width: min(1100px, 92vw);
}
#lpTop .hero-content h1{
  font-size: clamp(34px, 4.8vw, 64px);
  line-height: 1.15;
  margin-bottom: 18px;
  font-weight: 700;
}
#lpTop .hero-content p{
  max-width: 60ch;
  line-height: 1.9;
  opacity: .92;
  font-size: clamp(14px, 1.4vw, 18px);
}

/* -----------------
   About
----------------- */
#lpTop .about-lead{
  font-size: clamp(18px, 2.1vw, 28px);
  font-weight: 700;
  color: #1f3a5f;
  text-align: center;
  line-height: 1.7;
  margin: 26px 0;
}
#lpTop .about-divider{
  width: 64px;
  height: 3px;
  background: #004aad;
  margin: 22px auto;
}
#lpTop .about-text{
  font-size: clamp(14px, 1.5vw, 18px);
  color: #6b7280;
  text-align: center;
  line-height: 1.9;
}

/* -----------------
   Challenges（アイコン巨大化を防ぐ）
----------------- */
#lpTop .challenge-grid{
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
}
#lpTop .challenge-card{
  background: #fff;
  padding: 28px 22px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 28px rgba(0,0,0,.04);
}
#lpTop .challenge-icon{
  width: 96px;
  height: 96px;
  margin: 10px auto 18px;
  display: grid;
  place-items: center;
}
#lpTop .challenge-icon svg{
  width: 96px;          /* ←ここで固定 */
  height: 96px;         /* ←ここで固定 */
  display: block;
}
#lpTop .challenge-card h3{
  font-size: 18px;
  font-weight: 700;
  color: #1f3a5f;
  text-align: center;
  margin-bottom: 10px;
}
#lpTop .challenge-card .pain-point{
  font-size: 14px;
  color: #111827;
  text-align: center;
  margin-bottom: 14px;
  font-style: italic;
}
#lpTop .challenge-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
#lpTop .challenge-list li{
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 10px;
  padding-left: 22px;
  position: relative;
  line-height: 1.8;
}
#lpTop .challenge-list li::before{
  content: '✗';
  position: absolute;
  left: 0;
  color: #d32f2f;
  font-weight: 700;
}
#lpTop .challenge-bridge{
  text-align: center;
  margin-top: 28px;
  font-size: clamp(14px, 1.6vw, 18px);
  color: #1f3a5f;
  font-weight: 700;
}

/* -----------------
   Value
----------------- */
#lpTop .value-items{ margin-top: 34px; }
#lpTop .value-item{
  display: flex;
  gap: 34px;
  margin-bottom: 54px;
  align-items: flex-start;
}
#lpTop .value-number{
  font-family: 'Oswald', sans-serif;
  font-size: clamp(64px, 7vw, 110px);
  font-weight: 700;
  color: rgba(31, 58, 95, 0.10);
  line-height: 1;
  min-width: 110px;
}
#lpTop .value-content h3{
  font-size: clamp(20px, 2.4vw, 32px);
  color: #1f3a5f;
  margin-bottom: 14px;
  font-weight: 800;
  line-height: 1.45;
}
#lpTop .value-content > p{
  font-size: clamp(14px, 1.6vw, 18px);
  color: #6b7280;
  margin-bottom: 14px;
  line-height: 1.9;
}
#lpTop .value-list{
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
#lpTop .value-list li{
  font-size: clamp(14px, 1.5vw, 16px);
  color: #111827;
  margin-bottom: 10px;
  padding-left: 26px;
  position: relative;
  line-height: 1.9;
}
#lpTop .value-list li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: #004aad;
  font-weight: 800;
  font-size: 18px;
}
#lpTop .values-bridge{
  margin-top: 10px;
  text-align: center;
  font-size: clamp(16px, 1.9vw, 22px); /* ←小さい問題の修正 */
  color: #1f3a5f;
  font-weight: 800;
}
#lpTop .values-bridge-arrow{
  display: inline-block;
  margin-left: 8px;
}

/* -----------------
   Services（モック寄せ）
----------------- */
#lpTop .services{ background: #F5F2F2; }
#lpTop .service-intro-text{
  font-size: clamp(14px, 1.6vw, 18px);
  color: #6b7280;
  margin-top: 10px;
  text-align: center;
}
#lpTop .service-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 30px 0 22px;
}

/* カード */
#lpTop .service-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px;
  transition: .25s ease;
  cursor: pointer;
}
#lpTop .service-card:hover{
  border-color: #004aad;
  box-shadow: 0 14px 34px rgba(0, 74, 173, 0.10);
  transform: translateY(-2px);
}

/* アイコン（画像版・小さく固定） */
#lpTop .service-icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #004aad;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  overflow: hidden;
}
#lpTop .service-icon img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1); /* ←白アイコン化（必要なら外してください） */
}

/* 見出し/本文 */
#lpTop .service-card h3{
  font-size: clamp(18px, 2.0vw, 24px);
  margin-bottom: 10px;
  color: #1f3a5f;
  font-weight: 800;
}
#lpTop .service-card p{
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
  line-height: 1.9;
}

/* 箇条書き */
#lpTop .service-features{
  margin: 0 0 18px;
  padding-left: 18px;
}
#lpTop .service-features li{
  margin: 8px 0;
  color: #111827;
  font-size: 14px;
}
#lpTop .service-features li::marker{
  color: #004aad;
}

/* ボタン群 */
#lpTop .service-card-actions{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
}
#lpTop .service-card-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #004aad;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}
#lpTop .service-card-link:hover{ opacity: .92; }

/* 「概要を見る」ボタン（JS用） */
#lpTop .service-card-toggle{
  background: transparent;
  border: none;
  color: #004aad;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
#lpTop .service-card-toggle:hover{ text-decoration: underline; }

/* 詳細エリア（既存HTMLのコンテナ） */
#lpTop .service-detail-container{
  grid-column: 1 / -1;
  display: none; /* JSで開く想定 */
}
#lpTop .service-detail{
  margin-top: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px;
}

/* services footer */
#lpTop .services-footer{
  text-align: center;
  margin-top: 28px;
}
#lpTop .services-footer p{
  font-weight: 800;
  color: #1f3a5f;
  margin-bottom: 12px;
}
#lpTop .btn-primary{
  display: inline-block;
  background: #004aad;
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}
#lpTop .btn-primary:hover{ opacity: .92; }

/* responsive */
@media (max-width: 960px){
  #lpTop .challenge-grid{ grid-template-columns: 1fr; }
  #lpTop .service-grid{ grid-template-columns: 1fr; }
  #lpTop .value-item{ flex-direction: column; }
  #lpTop .about,
  #lpTop .challenges,
  #lpTop .value,
  #lpTop .services{ padding: 56px 0; }
}
@media (max-width: 640px){
  #lpTop .hero{ min-height: calc(100vh - 50px); padding-top: 86px; }
  #lpTop .challenge-icon{ width: 80px; height: 80px; }
  #lpTop .challenge-icon svg{ width: 80px; height: 80px; }
}

/* =====================================
   Challenge icon size fix
   ===================================== */
#lpTop .challenge-icon{
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lpTop .challenge-icon svg{
  width: 100%;
  height: 100%;
  max-width: 96px;
  max-height: 96px;
}

@media (max-width: 640px){
  #lpTop .challenge-icon{
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
  }
}

/* ===========================
   LP typography overrides
   (place at END of top.css)
   =========================== */

/* 「具体的にどんなサービスで…？」 */
#lpTop .values-bridge{
  margin-top: 32px;
  text-align: center;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.8;
  font-weight: 600;
  color: #1f3a5f;
}
#lpTop .values-bridge-arrow{
  display: inline-block;
  margin-left: 8px;
  font-size: 1.2em;
}

/* ===========================
   Heading hierarchy (LP only)
   =========================== */

/* base text */
#lpTop{
  font-size: 16px;
}
#lpTop p,
#lpTop li{
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.9;
}

/* H1 (Hero) */
#lpTop .hero-content h1{
  font-size: clamp(34px, 3.6vw, 60px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700; /* 視認性優先 */
}

/* Section title (実質H2相当の見出し) */
#lpTop .section-title{
  font-size: clamp(24px, 2.4vw, 42px);
  line-height: 1.35;
  margin-bottom: clamp(22px, 2.2vw, 60px);
  letter-spacing: -0.01em;
}

/* 小見出し（H3相当） */
#lpTop .challenge-card h3,
#lpTop .value-content h3,
#lpTop .service-card h3{
  font-size: clamp(18px, 1.5vw, 28px);
  line-height: 1.45;
  font-weight: 700;
}

/* Aboutのリード（強調テキスト） */
#lpTop .about-lead{
  font-size: clamp(18px, 1.8vw, 30px);
  line-height: 1.7;
}

/* スマホ時の余白最適化（読み疲れ防止） */
@media (max-width: 640px){
  #lpTop p,
  #lpTop li{
    line-height: 1.85;
  }
}

/* =========================================
   Services detail: 開いた時に中身が潰れない対策
   ========================================= */
#lpTop .service-detail-container{
  display: block;              /* 枠自体は常にDOM上で確保 */
}

#lpTop .service-detail{
  height: auto !important;     /* JSがheightを触っても潰れないように */
  max-height: none !important; /* max-height制限を解除 */
  overflow: visible !important;/* hiddenで中身が切れないように */
}

/* もし“開いた時だけ表示”にしたい場合は、下のどれかがJS側と一致すればOK */
#lpTop .service-detail-container{
  display: none;
}
#lpTop .service-detail-container.active,
#lpTop .service-detail-container.is-open,
#lpTop .service-detail-container.open,
#lpTop .service-detail-container[aria-hidden="false"]{
  display: block;
}


/* 詳細エリアが切れるのを防ぐ（暫定強制） */
#lpTop .service-detail-container{
  display:none;
}
#lpTop .service-detail-container.is-open{
  display:block;
}
#lpTop .service-detail{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}


/* --- Services accordion detail (row full width) --- */
.service-detail-container{
  display:none;
  margin-top:24px;
  border:2px solid #004aad;
  border-radius:14px;
  background:#fff;
  padding:28px 28px 24px;
}
.service-detail-container.active{
  display:block;
}

.service-detail-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.service-detail-header h2{
  font-size:28px;
  line-height:1.3;
  margin:0;
}

.service-detail-close{
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#004aad;
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.service-section{
  margin-top:22px;
}
.service-section-title{
  font-size:18px;
  font-weight:700;
  margin:0 0 10px;
  padding-left:12px;
  border-left:4px solid #004aad;
}
.service-section ul{
  margin:0;
  padding-left:18px;
}
.service-section li{
  margin:6px 0;
}

.service-steps{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-top:10px;
}
.service-step{
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:14px 14px 12px;
  background:#fff;
}
.step-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.step-number{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#004aad;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
}
.service-step h4{
  margin:0;
  font-size:16px;
  font-weight:700;
}
.service-step ul{
  margin:0;
  padding-left:18px;
}

.service-outcomes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.service-outcome{
  display:inline-block;
  padding:8px 10px;
  border-radius:999px;
  background:#f3f6ff;
  border:1px solid #d9e3ff;
  font-size:14px;
}

.service-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}
.service-meta-item{
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
}
.service-meta-label{
  font-size:12px;
  color:#666;
}
.service-meta-value{
  font-size:15px;
  font-weight:700;
  margin-top:4px;
}

.service-detail-cta{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #e6e6e6;
}
.service-detail-cta-button{
  display:inline-block;
  margin-top:8px;
  padding:12px 18px;
  border-radius:999px;
  background:#004aad;
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

/* SP */
@media (max-width: 960px){
  .service-detail-container{
    padding:18px 16px 16px;
  }
  .service-detail-header h2{
    font-size:22px;
  }
  .service-steps{
    grid-template-columns:1fr;
  }
  .service-meta{
    grid-template-columns:1fr;
  }
}

/* トップページ services のアイコン */
#lpTop .services .service-icon{
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(0, 74, 173, .08);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

#lpTop .services .service-icon i{
  font-size: 22px;
  color: #004aad;
  line-height: 1;
}

/* /service/ の各カテゴリに飛んだとき、固定ヘッダー分だけ下にずらす */
.pg-services .services-block {
  scroll-margin-top: 110px; /* ヘッダー高さに合わせて調整 */
}


html { scroll-behavior: smooth; }