@charset "utf-8";

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
main{
  overflow: hidden;
}
main .inner{
  max-width: calc(1092px + 60px);
}
main h2,
main h3,
main p,
main li,
main dt,
main dd{
  transform: rotate(0.05deg);
}
.marker-underline{
  background: linear-gradient(transparent 68%, #ffdc2f 0);
}
.ttl-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 45px;
  text-align: center;
  line-height: 1.35;
}
.ttl-section .ico{
  display: block;
  margin-bottom: 20px;
}
.ttl-section .ttl{
  display: block;
  font-size: 4.8rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.txt-lead{
  margin-bottom: 45px;
  text-align: center;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.5;
}

br.tb{
	display: none;
}

/* Mv
-----------------------------------------------------------------*/
#Mv{
  position: relative;
  width: 100%;
  height: 63.65vw;
  background: url(../img/why_mansion/bg_mv_pc.png) no-repeat center;
  background-size: cover;
}
#Mv h1,
#Mv .person01,
#Mv .person02,
#Mv .pic-mansion{
  position: absolute;
}
#Mv h1{
  left: 50%;
  top: 15vw;
  width: 42.4vw;
  transform: translateX(-50%);
}
#Mv .person01{
  left: 9.17vw;
  bottom: 6.88vw;
  width: 20.42vw;
}
#Mv .person02{
  right: 6.56vw;
  bottom: 4.79vw;
  width: 22.29vw;
}
#Mv .pic-mansion{
  left: 50%;
  bottom: -6vw;
  width: 38.13vw;
  transform: translateX(-50%);
}

/* intro
-----------------------------------------------------------------*/
.intro{
  padding: calc(5vw + 70px) 0 100px;
  text-align: center;
}
.intro h2{
  margin-bottom: 24px;
  font-weight: 700;
  line-height: 1.65;
}
.intro h2 span{
  display: block;
}
.intro h2 .small{
  font-size: 3rem;
  line-height: 2;
}
.intro h2 .ttl{
  display: inline-block;
  margin-top: 8px;
  background: linear-gradient(transparent 62%, #ffdc2f 0);
  font-size: 5.6rem;
  line-height: 1.35;
}
.intro .txt{
  font-size: 2rem;
  font-weight: 700;
  line-height: 2;
}
.intro .txt-lead{
  margin-top: 40px;  
}
.intro .txt-lead .logo{
  display: inline-block;
  transform: translate(10px,-20%);  
}


/* case01
-----------------------------------------------------------------*/
.case01 .nayami{
  position: relative;
  padding: 80px 0 270px;
  background: url(../img/why_mansion/bg_check.png) center;
  background-size: 80px auto;
}
.case01 .nayami .inner{
  position: relative;
  z-index: 1;
}
.case01 .nayami::after{
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 150px;
  content: "";
  background: url(../img/why_mansion/bg_case01_bottom.png) no-repeat center top;
}
.ranking{
  position: relative;
  margin: 0 auto 60px;
  padding: 42px 70px 48px;
  border: 2px solid #888;
  border-radius: 40px;
  background: #fff;
  box-shadow: 10px 10px 0 var(--orange);
}
.ranking h3{
  margin-bottom: 28px;
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.ranking h3 span{
  font-size: 1.8rem;
}
.ranking ol{
  position: relative;
  z-index: 1;
}
.ranking li,
.change-ranking-list li,
.sell-ranking-list li{
  display: flex;
  align-items: baseline;
  line-height: 1.35;
}
.ranking li{
  min-height: 38px;
  padding: 6px 120px 6px 0;
  border-bottom: 1px solid #d9d9d9;
  font-weight: 700;
  font-size: 2.8rem;
}
.ranking li:nth-child(n+2){
  margin-top: 25px;  
}
.ranking li.rank01{
  position: relative; 
  font-size: 3.2rem;
  border-bottom-color: #666;
}
.ranking li.rank01::before{
  position: absolute;
  left: 0;
  bottom: 0px;
  z-index: -1;
  display: block;
  width: 100%;
  height: 20px;
  content: "";
  background: #ffdc2f;
}
.ranking li.rank01 .num{
  color: #e60044;
}
.ranking .num,
.change-ranking-list .num,
.sell-ranking-list .num{
  display: flex;
  align-items: baseline;
  flex: 0 0 auto;
  margin-right: 10px;
  font-weight: 700;
}
.ranking .num strong,
.change-ranking-list .num strong,
.sell-ranking-list .num strong{
  margin-right: 2px;
  font-size: 1.65em;
  line-height: 1;
}
.ranking .txt{
  letter-spacing: .04em;
}
.ranking li.rank01 .txt small{
  font-size: 2.4rem;  
}
.ranking .note{
  margin-top: 8px;
  font-size: 1.2rem;
  letter-spacing: .04em;
}
.ranking .person{
  position: absolute;
  right: 150px;
  bottom: 28px;
  z-index: 10;
  width: 100px;
}
.sec-nayami{
	padding: 0 60px;	
}
.ttl-nayami{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 26px;
  text-align: center;
  font-size: 4.5rem;
  font-weight: 700;
}
.ttl-nayami .question{
  width: 28px;
}
.ttl-nayami .sweat{
  width: 26px;
}
.onayami-list{
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 100%;
  margin: 0 auto;
}
.onayami-list li{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc((100% - 30px) / 2);
  min-height: 118px;
  padding: 35px 60px 40px 30px;
  border: 4px solid var(--orange);
  border-radius: 30px;
  background: #FFFCD9;
  box-shadow: 8px 8px 0 var(--orange);
}
.onayami-list li:nth-child(4){
  z-index: 20;
}
.onayami-list h3{
  margin-bottom: 8px;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
}
.onayami-list .txt{
  position: relative;
  padding-left: 25px;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.45;
}
.onayami-list .txt::before{
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 0;
  height: 0;
  transform: translateY(10px);
  margin-right: 10px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 18px solid #FFDB3F;
  content: "";
}
.onayami-list li:nth-child(5){
	z-index: 50;
}
.onayami-list .person{
  position: absolute;
  transform: scale(0.9);
}
.onayami-list .person01{
  width: 110px;
  right: -15px;
  bottom: 0;  
}
.onayami-list .person02{
  width: 200px;
  right: -10px;
  bottom: 0;
  transform: translateX(40%);  
}
.onayami-list .person03{
  width: 70px;
  right: 0;
  bottom: 0;
  transform: translate(-50%,10%);  
}
.onayami-list .person04{
  right: -35px;
  top: -30px;  
}
.onayami-list .person05{
  right: 0;
  bottom: 0;
  transform: translate(20%,10%);   
}


.case01 .solution{
  padding: 155px 120px 200px;
}
.case01 .solution h2{
  position: relative;
  width: fit-content;
  margin: 0 auto 45px;
  text-align: center;
  font-size: 4.5rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.5;
}
.case01 .solution h2 .person-ttl{
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-140%,50%);
}
.case01 .solution h2 .bulb{
  position: absolute;
  right: 0;
  top: 0;
   transform: translate(110%,-20%);
  width: 100px;
}
.case01 .solution h2 .logo{
  display: inline-block;
  transform: translate(10px,-10%);  
}
.case01 .solution .pic-mansion{
  position: relative;
  margin: 0 auto 28px;
}
.case01 .solution .pic-mansion .caption{
  position: absolute;
  right: 60px;
  bottom: 10px;
  font-size: 1.2rem;
  letter-spacing: .02em;
  color: #000;
}
.solution-point > div + div{
  margin-top: 60px;
}
.solution-point dt{
  margin-bottom: 10px;
  padding: 8px 20px;
  border-radius: 6px;
  background: var(--orange);
  color: #fff;
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.35;
}
.solution-point dt span{
  display: inline-block;
  margin: 0 2px;
  font-size: 160%;
  line-height: .8;
  transform: translateY(5%);
}
.solution-point dd{
  position: relative;
}
.solution-point dd:not(.change){
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 170px 10px 35px;
}
.solution-point .graph{
  width: 650px;
}
.solution-point .graph .note{
	display: block;
	margin-top: 10px;
}
.solution-point dd:not(.change) .person{
  position: absolute;
  right: 0;
  bottom: -12px;
  width: 320px;
  transform: translateX(45%);
}
.change{
  z-index: 20;
  padding: 34px 0 0 0;
}
.change-ttl{
  margin-bottom: 18px;
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
}
.change-ranking-list{
  max-width: 780px;
  margin-inline: auto;  
}
.change-ranking-list li{
  justify-content: space-between;
  min-height: 40px;
  padding: 7px 0;
  border-bottom: 1px solid #d9d9d9;
  font-size: 2.8rem;
  font-weight: 700;
}
.change-ranking-list li > div:first-child{
  display: flex;
  align-items: baseline;
}
.change-ranking-list .rank01{
  position: relative;
  font-size: 3.5rem;
  border-bottom-color: #666;
}
.change-ranking-list .rank01::before{
  position: absolute;
  left: 0;
  bottom: 0px;
  z-index: -1;
  display: block;
  width: 100%;
  height: 20px;
  content: "";
  background: #ffdc2f;
}
.change-ranking-list .rank01 .num{
   color: #e60044;
}
.change-ranking-list .percentage{
  font-weight: 700;
}
.change .person{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 20;
  transform: translate(-50%,35%);
  width: 280px;
}
.sell{
  position: relative;
  margin: 80px auto 0;
  padding: 42px 48px 52px;
  border-radius: 6px;
  background: var(--orange);
  color: #fff;
}
.sell-ttl{
  margin-bottom: 26px;
  text-align: center;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.65;
}
.sell > .person{
  position: absolute;
  right: -30px;
  top: 120px;
  z-index: 20;
  width: 145px;
}
.sell-ranlink{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 26px 36px 28px;
  border-radius: 6px;
  background: #fff;
  color: #222;
}
.sell-ranlink h4{
  width: 100%;
  text-align: center;
  font-size: 2.8rem;  
}
.sell-ranking-list{
  width: calc((100% - 28px) / 2);
}
.sell-ranking-list + .sell-ranking-list{
  margin-top: 13px;  
}
.sell-ranking-list li{
  min-height: 30px;
  padding: 5px 0;
  border-bottom: 1px solid #d9d9d9;
  font-size: 1.8rem;
  font-weight: 700;
}
.sell-ranking-list .rank01{
  position: relative;
  font-size: 2.4rem;
}
.sell-ranking-list .rank01::before{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 15px;
  content: "";
  background: #ffdc2f;
  border-bottom-color: #666;
}
.sell-ranking-list .num{
  flex-shrink: 0;
  width: 44px;
  justify-content: flex-end; 
}
.sell-ranlink .note{
  width: 100%;
  color: #222;
  font-size: 1.2rem;
  letter-spacing: .02em;
}


@media screen and (max-width: 1260px) {
	br.tb{
		display: inline;
	}
	.onayami-list li{
		padding-left: 2.6vw;
		padding-right: 3vw;
	}
	.onayami-list h3 {
			font-size: 2.1vw;
	}
	.onayami-list .txt {
			font-size: 2.4vw;
	}
	.onayami-list .person01{
		width: 8.5vw;
	}
	.onayami-list .person02{
		width: 18.33vw;
    transform: translateX(50%);
	}
	.onayami-list .person03{
		width: 7vw;
    transform: translate(-20%, 10%);
	}
	.onayami-list .person04{
		width: 8vw;
	}
	.onayami-list .person05{
		width: 6.67vw;
	}
	.solution-point dd:not(.change) .person {
    width: 26.67vw;
	}
	.change .person {
    width: 23.33vw;
		transform: translate(-150px,35%);
	}
}
@media screen and (max-width: 1100px){
	.sell-ranking-list {
			width: 100%;
	}
	.sell-ranking-list + .sell-ranking-list {
    margin-top: -10px;
	}
}



/* case02
-----------------------------------------------------------------*/
.case02 .reform{
  position: relative;
  padding: 15.3vw 0 135px;
  background: var(--orange);
  color: var(--light);
}
.case02 .reform::before{
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 33vw;
  content: "";
  background: url(../img/why_mansion/bg_reform.png) no-repeat center top;
  background-size: cover;
}
.case02 .reform .inner{
  position: relative;
}
.case02 .reform .person01{
  position: absolute;
  right: 56px;
  top: -300px;
  z-index: 1;
  width: 330px;
}
.reform-hd{
  position: relative;
  min-height: 290px;
  padding: 80px 0 0;
  text-align: center;
}
.reform-hd .ttl-section{
  margin-bottom: 24px;
}
.reform-hd .ttl-section .ttl{
  color: #fff;
  font-size: 4.8rem;
  line-height: 1.6;
}
.reform-hd .ttl-section .ttl .logo{
  display: inline-block;
  margin-right: 10px;  
}
.reform-hd .txt{
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
}
.reform-hd .person02{
  position: absolute;
  left: 0;
  bottom: 120px;
  transform: translateX(-30%);
  z-index: 20;
  width: 180px;
}
.price{
  margin-top: 60px;
}
.price > div + div{
  margin-top: 72px;
}
.price dt{
  margin-bottom: 42px;
  padding: 10px 28px;
  border-radius: 9px;
  background: #fff;
  color: #222;
  text-align: center;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.45;
}
.price dd{
  position: relative;
}
.price .pic-price{
  max-width: 100%;
  margin: 0 auto;
}
.price .notes,
.price .note{
  max-width: 100%;
  margin: 14px auto 0;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.7;
}
.price .layout-box{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;
}
.fee-list{
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.6;
}
.fee-list li{
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.fee-list .total{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .7);
}
.price .txt-area{
  width: 400px;
}
.price .txt-area .txt-lead{
  margin-bottom: 20px;
  color: #fff;
  text-align: left;
  font-size: 2.4rem;
  line-height: 1.4;
}
.price .txt-area .txt-lead > span{
  display: inline-block;
  padding-bottom: 10px;
  background: linear-gradient(transparent 79%, #ffdc2f 0);
  font-size: 3.4rem;
  font-weight: 700;
}
.price .txt-area .txt-lead strong{
  font-size: 4.8rem;
  line-height: .9;
}
.price .txt-area .txt-lead small{
  font-size: 2rem;
}
.price .txt-area .txt{
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .5);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;
}
.sumikae{
  position: relative;
  max-width: 970px;
  width: 100%;
  margin: 112px auto 0;
  text-align: center;
}
.sumikae h3{
  margin-bottom: 50px;
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.65;
}
.sumikae-box{
  position: relative;
  padding: 42px 68px 36px;
  border-radius: 6px;
  background: #fff;
  color: #222;
}
.sumikae-box h4{
  margin-bottom: 28px;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1.6;
}
.sumikae-box h5{
  width: fit-content;
  margin: 0 auto 30px;
  font-size: 2.2rem;
  line-height: 1.4;
  border-bottom: 1px solid #000;  
}
.sumikae-box .graph-area{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}
.sumikae-box figure{
  width: calc((100% - 24px) / 2);
}
.sumikae-box .notes{
  margin-top: 12px;
  text-align: left;
  color: #222;
  font-size: 1.2rem;
  letter-spacing: .02em;
  line-height: 1.5;
}
.sumikae-box .person{
  position: absolute;
  z-index: 1;
}
.sumikae-box .person03{
  left: -55px;
  top: -70px;
  width: 108px;
}
.sumikae-box .person04{
  right: -112px;
  top: 0;
  width: 210px;
}
.case02 .closing{
  padding: 60px 0 140px;
  background: var(--orange);
  color: var(--light);
}
.case02 .closing .inner{
  text-align: center;
}
.case02 .closing h2{
  margin-bottom: 20px;
  font-size: 3.8rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.8;
}
.case02 .closing .pic{
  width: 100%;
  max-width: 960px;
  margin: 0 auto 45px;
  text-align: left;
}
.case02 .closing .pic img{
  max-width: 900px;
	width: 100%;  
}
.case02 .page-note{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.9;
}


@media screen and (max-width: 1200px){
	.reform-hd .person02 {
			transform: translateX(0);
			width: 15vw;
	}
	.sumikae-box .person03 {
			left: -30px;
			width: 9vw;
	}
	.sumikae-box .person04 {
			right: -30px;
			width: 16vw;
	}	
}


















/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	br.tb{
		display: none;
	}
  main .inner{
    max-width: initial;
  }
  .ttl-section{
    margin-bottom: 28px;
  }
  .ttl-section .ico{
    width: 96px;
    margin-bottom: 8px;
  }
  .ttl-section .ttl{
    font-size: 2.3rem;
  }
  .txt-lead{
    margin-bottom: 25px;
    font-size: 1.8rem;
  }
  #Mv{
    height: 158vw;
    min-height: 590px;
    background-image: url(../img/why_mansion/bg_mv04_sp.png), url(../img/why_mansion/bg_mv03_sp.png), url(../img/why_mansion/bg_mv02_sp.png), url(../img/why_mansion/bg_mv01_sp.png);
    background-repeat: no-repeat;
    background-position: right bottom, left bottom, right top, left top;
    background-size: 32% auto, 80% auto, 38% auto, 60% auto;
  }
  #Mv h1{
    top: 27vw;
    width: 82vw;
  }
  #Mv .person01{
    left: 5vw;
    bottom: 35vw;
    width: 34vw;
  }
  #Mv .person02{
    right: -1vw;
    bottom: 40vw;
    width: 35vw;
  }
  #Mv .pic-mansion{
    bottom: -10vw;
    width: 76vw;
  }
  .intro{
    padding: 55px 0 58px;
  }
  .intro h2{
    margin-bottom: 15px;  
  }
  .intro h2 .small{
    font-size: 1.6rem;
    line-height: 1.8;
  }
  .intro h2 .ttl{
    font-size: 2.3rem;
  }
  .intro .txt{
    font-size: 1.3rem;
    line-height: 1.9;
  }
  .intro .txt-lead{
    margin-top: 15px;  
  }
  .intro .txt-lead .logo{
    width: 120px;
    transform: translate(5px,-10%);  
  }

  .case01 .nayami{
    padding: 54px 0 140px;
  }
  .case01 .nayami::after{
    height: 78px;
    background-size: auto 78px;
  }
  .ranking{
    width: calc(100% - 14px);
    padding: 28px 18px 32px;
    border-radius: 10px;
    box-shadow: 5px 5px 0 #009bd5;
  }
  .ranking h3{
    font-size: 1.7rem;
  }
  .ranking h3 span{
    display: block;
    font-size: 1.4rem;  
  }
  .ranking li{
    width: 100%;
    padding-right: 0;
    font-size: 1.4rem;
  }
  .ranking li:nth-child(n+2) {
    margin-top: 15px;
  }
  .ranking li.rank01{
    font-size: 1.6rem;
  }
  .ranking li.rank01 .txt small{
    font-size: 1.1rem;
    letter-spacing: 0;
  }
  .ranking li.rank01::before {
    height: 15px;
  }
  .ranking .num, .change-ranking-list .num, .sell-ranking-list .num{
    margin-right: 5px; 
  }
  .ranking .person{
    right: 12px;
    bottom: 32px;
    width: 56px;
  }
  .ranking .note{
    padding-right: 40px;
    font-size: 1rem;
  }
	.sec-nayami {
    padding: 0;
	}
  .ttl-nayami{
    gap: 8px;
    font-size: 1.8rem;
  }
  .ttl-nayami .question{
    width: 22px;
  }
  .ttl-nayami .sweat{
    width: 22px;
  }
  .onayami-list{
    width: 100%;
    gap: 15px;
  }
  .onayami-list li{
    width: 100%;
    min-height: 105px;
    padding: 18px 30px 16px 22px;
    border-width: 2px;
    box-shadow: 5px 5px 0 #009bd5;
  }
	.sell-ranking-list + .sell-ranking-list {
    margin-top: 0;
	}
  .onayami-list .txt{
    padding-left: 18px;  
  }
  .onayami-list .txt .logo img{
    width: 120px;  
  }
  .onayami-list li:nth-child(4) .logo{
    margin-left: .5em;
  }
  .onayami-list .txt::before {
    transform: translateY(5px);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid #FFDB3F;
  }
  .onayami-list h3{
    font-size: 1.3rem;
  }
  .onayami-list .txt{
    font-size: 1.8rem;
  }
  .onayami-list .person01{ width: 58px; }
  .onayami-list .person02{ width: 92px; transform: none; }
  .onayami-list .person03{ width: 45px; transform: translate(-50%, -40%);}
  .onayami-list .person04{ width: 60px; right: 5px; top:auto; bottom: -15px;}
  .onayami-list .person05{ width: 56px; transform: translate(-20%, -5%);}
  .case01 .solution{
    padding: 20px 0 60px;
  }
  .case01 .solution h2{
    min-height: 118px;
    margin-bottom: 18px;
    padding: 0 28px;
    font-size: 2rem;
  }
  .case01 .solution h2::before,
  .case01 .solution h2::after{
    top: -12px;
    width: 38vw;
  }
  .case01 .solution h2::before{
    right: calc(100% - 72px);
  }
  .case01 .solution h2::after{
    left: calc(100% - 72px);
  }
  .case01 .solution h2 .person-ttl{
    left: 0;
    width: 58px;
    transform: translate(-20%, 85%);
  }
  .case01 .solution h2 .bulb{
    right: 0;
    top: 0;
    transform: translate(40%, -20%);
    width: 45px;
  }
  .case01 .solution .pic-mansion{
    max-width: 98%;
  }
  .case01 .solution .pic-mansion .caption{
    right: 10px;
    bottom: -5px;
    font-size: 1rem;
  }
  .solution-point > div + div {
    margin-top: -5px;
  }
  .solution-point dt{
    display: block;
    padding: 9px 12px;
    font-size: 1.6rem;
  }
  .solution-point dt span{
    font-size: 2.2rem;
  }
  .solution-point dd:not(.change){
    z-index: 20;
    display: block;
    padding: 18px 0 0;
  }
  .solution-point .graph{
    width: 90%;
    margin-inline: auto;
  }
  .solution-point dd:not(.change) .person{
    position: static;
    right: 0;
    width: 35%;
    margin: -14vw 0 0 auto;
    transform: none;
  }
  .change{
    min-height: 0;
    padding: 0;
  }
  .change-ttl{
    margin-bottom: 10px;
    font-size: 1.4rem;
  }
  .change-ranking-list .rank01 {
    font-size: 1.8rem;
  }
  .change-ranking-list .rank01::before {
    height: 15px;
  }
  .change-ranking-list li{
    font-size: 1.3rem;
  }
  .change .person{
    left: auto;
    right: 0;
    width: 32%;
    transform: translate(-10%, 75%);
  }
  .sell{
    margin-top: 20vw;
    padding: 30px 14px 34px;
  }
  .sell-ttl{
    padding-right: 0;
    text-align: left;
    font-size: 1.65rem;
  }
  .sell > .person{
    display: none;
    right: 4px;
    top: -20px;
    width: 80px;
  }
  .sell-ranlink h4 {
    font-size: 1.6rem;
  }
  .sell-ranking-list .rank01 {
    font-size: 1.8rem;
  }
  .sell-ranlink{
    display: block;
    padding: 18px 18px 28px;
  }
  .sell-ranking-list{
    width: 100%;
  }
  .sell-ranking-list li{
    font-size: 1.2rem;
  }
  .sell-ranking-list .num {
    width: 35px;
  }
  .sell-ranlink .note{
    margin-top: 5px;
    font-size: 1rem;
  }
  .case02 .reform{
    padding: 32vw 0 62px;
  }
  .case02 .reform::before{
    height: 52vw;
  }
  .case02 .reform .person01{
    right: 2vw;
    top: -42vw;
    width: 45%;
  }
  .reform-hd{
    min-height: 0;
    padding: 42px 0 30px;
  }
  .reform-hd .ttl-section .ico{
    width: 115px;
  }
  .reform-hd .ttl-section .ttl{
    font-size: 2.8rem;
  }
  .reform-hd .ttl-section .logo{
    width: 180px;
    vertical-align: middle;
    transform: translateY(-15%);  
  }
  .reform-hd .txt{
    font-size: 1.35rem;
    line-height: 1.9;
  }
  .reform-hd .person02{
    display: none;
  }
  .price{
    margin-top: 0; 
  }
  .price > div + div{
    margin-top: 45px;
  }
  .price dt{
    margin-bottom: 24px;
    padding: 9px 14px;
    border-radius: 7px;
    font-size: 1.7rem;
  }
  .price .notes,
  .price .note{
    font-size: 1rem;
  }
  .price .layout-box{
    display: block;
  }
  .fee-list{
    width: 100%;
    max-width: 310px;
    margin: 0 auto 22px;
    font-size: 1.7rem;
  }
  .price .txt-area{
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
  }
  .price .txt-area .txt-lead{
    font-size: 1.8rem;
  }
  .price .txt-area .txt-lead > span{
    font-size: 2.3rem;
  }
  .price .txt-area .txt-lead strong{
    font-size: 3.5rem;
  }
  .price .txt-area .txt{
    font-size: 1.3rem;
  }
  .sumikae{
    margin-top: 62px;
  }
  .sumikae h3{
    margin-bottom: 24px;
    font-size: 2rem;
  }
  .sumikae h3::before{
    margin-right: 8px;
    font-size: 3rem;
    vertical-align: -5px;
  }
  .sumikae-box{
    margin: 0;
    padding: 30px 16px 26px;
  }
  .sumikae-box h4{
    margin-bottom: 15px;
    font-size: 1.8rem;
  }
  .sumikae-box h5 {
    margin: 0 auto 20px;
    font-size: 1.4rem;
  }
  .sumikae-box .graph-area{
    display: block;
  }
  .sumikae-box figure{
    width: 100%;
  }
  .sumikae-box figure + figure{
    margin-top: 18px;
  }
	.sumikae-box .notes {
    font-size: 1rem;
	}
  .sumikae-box .person{
    display: none;
  }
  .case02 .closing{
    padding: 20px 0 85px;
  }
  .case02 .closing h2{
    margin-bottom: 24px;
    font-size: 2rem;
    line-height: 1.65;
  }
  .case02 .closing .pic{
    margin-bottom: 28px;
  }
  .case02 .page-note{
    font-size: .95rem;
    line-height: 1.7;
  }
}