@charset "utf-8";

.charm .pjContents{
  font-family: var(--font-family-go);
}

.charmBlock{
  color: #323f2e;
  font-feature-settings: "palt";
}


.chaCopyI{
  line-height: 1.0;
  margin: 0 auto;
  text-align: center;
}
.chaCopyI img{
  max-width: 600px;
}

.chaCopy01{
  padding-left: 0.2em;
  font-size: clamp(calc(36px * var(--font-markup)), calc(36vw / var(--vw-pc)), 36px);/*36 / 24*/
  letter-spacing: 0.2em;
  line-height: 1.6;
  text-align: center;
}
.chaCopy02{
  padding-left: 0.1em;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 18*/
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: center;
}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 840px) and (orientation:portrait) {
  /*縦向きのみの記述 --proはPC*/
  .chaCopy01{
    font-size: clamp(calc(36px * var(--font-markup)), calc(36vw / var(--vw-tb)), 36px);/*36 / 24*/
  }
  .chaCopy02{
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-tb)), 20px);/*20 / 18*/
  }
  
  .copy01{
    font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-tb)), 28px);/*28 / 20*/
  }
  .copy02{
    font-size: clamp(calc(23px * var(--font-markup)), calc(23vw / var(--vw-tb)), 23px);/*23 / 18*/
  }
  .copy03{
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-tb)), 18px);/*18 / 16*/
  }

  .lead01{
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-tb)), 16px);/*16 / 15*/
  }
  .lead02{
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-tb)), 15px);/*15 / 14*/
  }
  .lead03{
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-tb)), 14px);/*14 / 13*/
  }
  .lead04{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-tb)), 13px);/*13 / 12*/
  }
}

.charmH{
  padding: 75px 0 100px 0;
}
.charmH .catchEn{
  text-align: center;
  line-height: 1.0;
}
.charmH .chaCopy01,
.charmH .chaCopyI{
  margin-top: 25px;
  line-height: 1.0;
}
.charmH .chaCopy01 + p,
.charmH .chaCopyI + p{
  margin: 30px 0 0 0;
  padding-left: 0.1em;
  text-align: center;
  letter-spacing: 0.1em;
}

.btn01,
.btn02{
  position: relative;
  margin: 70px auto 0 auto;
  width: 100%;
  letter-spacing: 0.2em;
  line-height: 1.0;
}

.btn01 > a,
.btn02 > a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0 auto;
  padding-left: 0.1em;
  border-width: 1px;
  border-style: solid;
  border-color: #323f2e;
  border-radius: 200px;
  font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-pc)), 15px);
  letter-spacing: 0.1em;
  transition: var(--transition-duration01);
  text-decoration: none;
}


.btn01 > a{
  width: 380px;
  height: 60px;
  color: #323f2e;
}
.btn02 > a{
  width: 450px;
  height: 80px;
  background: #323f2e;
  color: var(--color-white);
}

.btn01 > a::after,
.btn02 > a::after{
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  display: block;
  width: 27px;
  height: 6px;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  transform: translate(0,-50%);
  transition: var(--transition-duration01);
}
.btn01 > a::after{
  background-image: url("../img/cmn/ico_arrow_col02.svg");  
}
.btn02 > a::after{
  background-image: url("../img/cmn/ico_arrow_wh.svg");  
}
/*hover*/
@media screen and (min-width: 768px) {
  .btn01 > a:hover,
  .btn02 > a:hover{
    opacity: 1.0;
  }
  .btn01 > a:hover{
    background: #323f2e;
    color: var(--color-white);
  }
  .btn02 > a:hover{
    background: var(--color-white);
    color: #323f2e;
  }
  .btn01 > a:hover::after,
  .btn02 > a:hover::after{
    transform: translate(5px,-50%);
  }
  .btn01 > a:hover::after{
    background-image: url("../img/cmn/ico_arrow_wh.svg"); 
  }
  .btn02 > a:hover::after{
    background-image: url("../img/cmn/ico_arrow_col02.svg"); 
  }
}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 840px) and (orientation:portrait) {
  /*縦向きのみの記述 --proはPC*/
  .btn01 > a,
  .btn02 > a{
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-tb)), 15px);
  }
}


/* for sp*/
@media screen and (max-width: 767px) {
  
  .charmBlock{}
  
  .chaCopyI{}
  .chaCopyI img{
    max-width: 100%;
  }
  
  .chaCopy01{
    padding-left: 0.05em;
    font-size: clamp(calc(21px * var(--font-markup)), calc(21vw / var(--vw-sp)), 21px);/*36 / 21*/
    letter-spacing: 0.05em;
  }
  .chaCopy02{
    padding-left: 0.05em;
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*20 / 18*/
    letter-spacing: 0.05em;
  }

  .charmH{
    padding: 50px 0 50px 0;
  }
  .charmH .catchEn{
    width: 50%;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }
  .charmH .chaCopy01,
  .charmH .chaCopyI{
    margin-top: 20px;
    line-height: 1.6;
  }
  .charmH .chaCopy01 + p,
  .charmH .chaCopyI + p{
    margin-top: 25px;
    padding-left: 0.05em;
    letter-spacing: 0.05em;
  }

  .btn01,
  .btn02{
    margin-top: 40px;
    letter-spacing: 0.1em;
  }

  .btn01 > a,
  .btn02 > a{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);
    letter-spacing: 0.05em;
  }
  .btn01 > a{
    width: 90%;
    height: 50px;
  }
  .btn02 > a{
    width: 90%;
    height: 60px;
  }

  .btn01 > a::after,
  .btn02 > a::after{
    right: 10px;
    width: 24px;
    height: 6px;
  }
  .btn01 > a::after{}
  .btn02 > a::after{}
  
  .btn01 > a:active,
  .btn02 > a:active{
    opacity: 1.0;
  }
  .btn01 > a:active{
    background: #323f2e;
    color: var(--color-white);
  }
  .btn02 > a:active{
    background: var(--color-white);
    color: #323f2e;
  }
  .btn01 > a:active::after,
  .btn02 > a:active::after{
    transform: translate(5px,-50%);
  }
  .btn01 > a:active::after{
    background-image: url("../img/cmn/ico_arrow_wh.svg"); 
  }
  .btn02 > a:active::after{
    background-image: url("../img/cmn/ico_arrow_col02.svg"); 
  }
}


/*near*/
.near{}
.near .nearList{
  background: var(--color-white);
}
.near .nearList > section{
  display: flex;
  height: 620px;
}
.near .nearList > section:nth-of-type(3){
  height: 820px;
}

.near .nearList > section:nth-of-type(2n){
  flex-direction: row-reverse;
}
.near .nearList > section > div,
.near .nearList > section > figure{
  position: relative;
  width: calc(100% / 2);
}
.near .nearList > section > figure{
  /*height: 100%;*/
  /*max-height: 820px;*/
  overflow: hidden;
}
.near .nearList > section > figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.near .nearList > section > figure figcaption{
  color: var(--color-white);
}
.near .nearList > section:nth-of-type(2) > figure figcaption{
  color: #777;
}

.near .nearList > section > div{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*padding: 65px 0 90px 0;*/
}

.near .nearList > section > div h3{
  text-align: center;
  line-height: 1.0;
}
.near .nearList > section > div h3 img{
  max-width: 400px;
}


/*.near .nearList > section > div h3{
  padding-left: 0.2em;
  font-size: clamp(calc(35px * var(--font-markup)), calc(35vw / var(--vw-pc)), 35px);
  letter-spacing: 0.2em;
  line-height: 1.0;
  text-align: center;
}
.near .nearList > section > div h3 span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  padding-left: 0.2em;
  border: 2px solid #323f2e;
  border-radius: 50%;
  font-size: calc((6 / 7) * 100%);
  line-height: 1.0;
  text-align: center;
}
.near .nearList > section > div h3 + p{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  margin: 10px auto 0 auto;
  padding: 10px 1.2em 10px 1.4em;
  background: #323f2e;
  border-radius: 200px;
  color: var(--color-white);
  font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-pc)), 18px);
  letter-spacing: 0.2em;
  line-height: 1.0;
  text-align: center;
}*/

.near .nearList > section > div h3 /*+ p */+ .lead02,
.near .nearList > section > div .pList{
  width: 95%;
  max-width: 460px;
}
.near .nearList > section > div h3 /*+ p */+ .lead02{
  margin: 50px 0 0 0;
  text-align: left;
}

.near .nearList > section > div .pList{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  margin-top: 45px;
}
.near .nearList > section > div .pList li{
  position: relative;
  width: calc((21 / 46) * 100%);/*210 / 460*/
  text-align: center;
  line-height: 1.0;
}
.near .nearList > section > div .pList li p:nth-of-type(1){
  margin: 15px 0 0 0;
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-pc)), 14px);/*14 / 13*/
  line-height: 1.0;
}


.near .nearList > section > div .pList li p:nth-of-type(1) span{
  margin-left: 0.5em;
  font-size: 10px;
}
.near .nearList > section > div .pList li p:nth-of-type(2){
  margin: 10px 0 0 0;
  font-size: 10px;
  line-height: 1.0;
}
.near .nearList > section > div .pList li > span{
  position: absolute;
  right: -10px;
  top: -10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: #323f2e;
  border-radius: 50%;
  color: #fff;
  line-height: 1.0;
}
.near .nearList > section > div .pList li > span i{
  font-style: normal;
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-pc)), 13px);/*13 / 12*/
  line-height: 1.0;
}
.near .nearList > section > div .pList li > span strong{
  margin: 5px 0 0 0;
  font-weight: 400;
  font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*30 / 24*/
  line-height: 1.0;
}



.near .nearList > section > div .pList li > span strong span{
  font-size: 50%;
  line-height: 1.0;
}


.near .nearList > section > div figure.pList{
  display: block;
}


/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 840px) and (orientation:portrait) {
  /*縦向きのみの記述 --proはPC*/
  .near .nearList > section > div .pList li p:nth-of-type(1){
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-tb)), 14px);/*14 / 13*/
  }
  /*縦向きのみの記述 --proはPC*/
  .near .nearList > section > div .pList li > span i{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-tb)), 13px);/*13 / 12*/
  }
  .near .nearList > section > div .pList li > span strong{
    font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-tb)), 30px);/*30 / 24*/
  }
  
	.near .nearList > section{
    height: auto;
  }
  .near .nearList > section:nth-of-type(3){
    height: auto;
  }
  
  .near .nearList > section > div{
    padding: 30px 0;
  }
  .near .nearList > section > div h3 img{
    width: 70%;
  }
  .near .nearList > section > div h3 /*+ p */+ .lead02{
    margin-top: 20px;
  }
  .near .nearList > section > div .pList{
    margin-top: 30px;
  }
  .near .nearList > section > div h3 /*+ p */+ .lead02,
  .near .nearList > section > div .pList{
    width: 80%;
  }
  .near .nearList > section > div .pList{
    gap: 20px;
  }
  .near .nearList > section > div .pList li{}
  .near .nearList > section > div .pList li > span{
    width: 50px;
    height: 50px;
  }
  .near .nearList > section > div .pList li p:nth-of-type(1){
    margin-top: 10px;
    font-size: 12px;
    }
  .near .nearList > section > div .pList li p:nth-of-type(2){
    line-height: 1.4;
  }
}



/* for sp*/
@media screen and (max-width: 767px) {
  .near{}
  .near .nearList{}
  .near .nearList > section{
    flex-direction: column-reverse;
    height: auto;
    max-height: initial;
  }
  .near .nearList > section:nth-of-type(3){
    height: auto;
  }
  .near .nearList > section:nth-of-type(2n){
    flex-direction: column-reverse;
  }
  .near .nearList > section > div,
  .near .nearList > section > figure{
    width: 100%;
  }
  .near .nearList > section > figure{
    height: auto;
    max-height: initial;
  }
  .near .nearList > section > figure img{
    width: 100%;
    height: auto;
    object-fit: fill;
  }
  .near .nearList > section > figure figcaption{}
  .near .nearList > section:nth-of-type(2) > figure figcaption{}

  .near .nearList > section > div{
    padding: 50px 4vw;
  }
  .near .nearList > section > div h3 img{
    width: 75%;
  }
  /*.near .nearList > section > div h3{
    padding-left: 0.1em;
    font-size: clamp(calc(23px * var(--font-markup)), calc(23vw / var(--vw-sp)), 23px);
    letter-spacing: 0.1em;
  }
  .near .nearList > section > div h3 span{
    width: 1.7em;
    height: 1.7em;
    padding-left: 0.1em;
  }

  .near .nearList > section > div h3 + p{
    min-width: initial;
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);
    letter-spacing: 0.1em;
  }*/
  .near .nearList > section > div h3 /*+ p */+ .lead02,
  .near .nearList > section > div .pList{
    width: auto;
    max-width: initial;
  }
  .near .nearList > section > div h3 /*+ p */+ .lead02{
    margin-top: 30px;
  }

  .near .nearList > section > div .pList{
    gap: 20px;
    margin-top: 30px;
  }
  .near .nearList > section > div .pList li{
    width: calc((100% - 20px) / 2);
  }
  .near .nearList > section > div .pList li p:nth-of-type(1){
    margin-top: 10px;
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*14 / 13*/
    line-height: 1.4;
  }
  .near .nearList > section > div .pList li p:nth-of-type(1) span{}
  .near .nearList > section > div .pList li p:nth-of-type(2){
    line-height: 1.6;
  }
  .near .nearList > section > div .pList li > span{
    width: 60px;
    height: 60px;
  }
  .near .nearList > section > div .pList li > span i{
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-sp)), 12px);/*13 / 12*/
  }
  .near .nearList > section > div .pList li > span strong{
    font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-sp)), 24px);/*30 / 24*/
  }
  .near .nearList > section > div .pList li > span strong span{}


  .near .nearList > section > div figure.pList{}

}



.town{}
.town .gaikan{
  position: relative;
  color: #fff;
}

.town .townList{
  max-width: 750px;
  margin: 0 auto;
}
.town .townList > section{
  padding: 100px 0 0 0;
}
.town .townList > section .kikorin{
  width: 200px;
  margin: 0 auto;
}
.town .townList > section .baloon{
  position: relative;
  margin: 30px auto 0 auto;
  padding: 0 0 56px 0;
}
.town .townList > section .baloon::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 54px;
  height: 56px;
  background: url("../img/charm/town_baloon.svg") no-repeat center top;
  background-size: cover;
  transform: translate(-50%,0);
}
.town .townList > section .baloon > h3{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  border-radius: 30px;
  background: #323f2e;
  color: var(--color-white);
}
.town .townList > section .townBody{
  display: flex;
  justify-content: space-between;
  margin: 30px auto 0 auto;
}



.town .townList > section .townBody dl{
  width: calc((37 / 75) * 100%);/*370 / 750*/
  text-align: left;
}
.town .townList > section .townBody dl dt{
  position: relative;
  padding: 7px 0 0 45px;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 18*/
  line-height: 1.0;
  letter-spacing: 0.1em;
}
.town .townList > section .townBody dl dt span{
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background: #c35f0a;
  border-radius: 50%;
  color: var(--color-white);
  font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-pc)), 18px);/*18 / 16*/
  line-height: 1.0;
  letter-spacing: 0;
}
.town .townList > section .townBody dl dd + dt{
  margin-top: 35px;
}
.town .townList > section .townBody dl dd{
  margin-top: 15px;
}


/*1*/
.town .townList > section:nth-of-type(1) .townBody > figure{
  width: calc((67 / 150) * 100%);/*335 / 750*/
}

/*2*/
.town .townList > section:nth-of-type(2) .townBody > figure{
  width: calc((152 / 375) * 100%);/*304 / 750*/
}

/*3*/
.town .townList > section:nth-of-type(3) .townBody{
  display: block;
}
.town .townList > section:nth-of-type(3) .townBody > div{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.town .townList > section:nth-of-type(3) .townBody > div + div{
  margin-top: 70px;
}
.town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1){
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 120px;
  background: var(--color-white);
  border: 3px solid #323f2e;
  border-radius: 10px;
  color: #323f2e;
  font-size: clamp(calc(23px * var(--font-markup)), calc(23vw / var(--vw-pc)), 23px);/*23 / 15*/
  line-height: 1.4;
}
.town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1) span:not(.br){}
.town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1)::before{
  position: absolute;
  left: 0;
  top: -30px;
  content: "住友林業の戸建は";
  display: block;
  width: 100%;
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*16 / 13*/
  line-height: 1.0;
}
.town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1)::after,
.town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(2)::after{
  position: absolute;
  right: -50px;
  top: 50%;
  content: "";
  display: block;
  width: 50px;
  height: 42px;
  background: url("../img/charm/town_arrow.svg") no-repeat left center;
  background-size: cover;
  transform: translate(0,-50%);
}
.town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(2){
  position: relative;
  width: 150px;
  color: #c35f0a;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 16*/
  line-height: 1.4;
  text-align: center;
}
.town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(3){
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 230px;
  background: #c35f0a;
  border-radius: 50%;
  color: var(--color-white);
  font-size: clamp(calc(26px * var(--font-markup)), calc(26vw / var(--vw-pc)), 26px);/*26 / 18*/
  line-height: 1.4;
  text-align: center;
}
.town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(3) span:not(.br){}
.town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(3)::after{
  position: absolute;
  right: -10px;
  top: 20px;
  content: "";
  display: block;
  width: 80px;
  height: 50px;
  background: url("../img/charm/town_good.svg") no-repeat left center;
  background-size: cover;
}
.town .btn01::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 50%;
  display: block;
  width: 200px;
  /*height: 140px;*/
  aspect-ratio: 10/ 7;
  background: url("../img/charm/kikorin03.png") no-repeat center center;
  background-size: cover;
  transform: translate(0,-50%);
}


.town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1) i.cap{
  font-style: normal;
  font-size: 10px;
}


/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 840px) and (orientation:portrait) {
  /*縦向きのみの記述 --proはPC*/
  
  .town .townList > section .kikorin{
    width: 150px;
  }
  .town .townList > section .townBody dl dt{
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-tb)), 20px);/*20 / 18*/
  }
  .town .townList > section .townBody dl dt span{
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-tb)), 18px);/*18 / 16*/
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1){
    font-size: clamp(calc(23px * var(--font-markup)), calc(23vw / var(--vw-tb)), 23px);/*23 / 15*/
    line-height: 1.4;
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1)::before{
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-tb)), 16px);/*16 / 13*/
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(2){
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-tb)), 20px);/*20 / 16*/
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(3){
    font-size: clamp(calc(26px * var(--font-markup)), calc(26vw / var(--vw-tb)), 26px);/*26 / 18*/
  }
  .town .btn01::before {
    left: 10px;
    width: 150px;
  }
}


/* for sp*/
@media screen and (max-width: 767px) {
  .town{}
  .town .gaikan{}

  .town .townList{}
  .town .townList > section{
    padding-top: 50px;
  }
  .town .townList > section .kikorin{
    width: 150px;
  }
  .town .townList > section .baloon{
    margin-top: 20px;
    padding-bottom: 28px;
  }
  .town .townList > section .baloon::after{
    width: 27px;
    height: 28px;
  }
  .town .townList > section .baloon > h3{
    height: initial;
    padding: 1em 0;
    border-radius: 16px;
  }
  .town .townList > section .townBody{
    display: block;
    margin-top: 20px;
  }

  .town .townList > section .townBody dl{
    width: 100%;
    margin-top: 30px;
  }
  .town .townList > section .townBody dl dt{
    padding: 4px 0 0 35px;
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*20 / 18*/
    letter-spacing: 0.05em;
  }
  .town .townList > section .townBody dl dt span{
    width: 25px;
    height: 25px;
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*18 / 16*/
  }
  .town .townList > section .townBody dl dd + dt{
    margin-top: 25px;
  }
  .town .townList > section .townBody dl dd{
    margin-top: 10px;
  }


  /*1*/
  .town .townList > section:nth-of-type(1) .townBody > figure{
    width: 80%;
    margin: 0 auto;
  }

  /*2*/
  .town .townList > section:nth-of-type(2) .townBody > figure{
    width: 80%;
    margin: 0 auto;
  }

  /*3*/
  .town .townList > section:nth-of-type(3) .townBody{}
  .town .townList > section:nth-of-type(3) .townBody > div{}
  .town .townList > section:nth-of-type(3) .townBody > div + div{
    margin-top: 40px;
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1){
    width: 90px;
    height: 80px;
    border-width: 2px;
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*25 / 13*/
    letter-spacing: 0;
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1) span:not(.br){
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1)::before{
    top: -20px;
    font-size: clamp(calc(11px * var(--font-markup)), calc(11vw / var(--vw-sp)), 11px);/*16 / 11*/
    white-space: nowrap;
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1)::after,
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(2)::after{
    right: -25px;
    width: 25px;
    height: 21px;
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(2){
    width: calc(100% - 90px - 100px - 50px);
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*20 / 13*/
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(3){
    width: 100px;
    height: 100px;
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*28 / 13*/
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(3) span:not(.br){
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(3)::after{
    top: -5px;
    right: 10px;
    width: 40px;
    height: 25px;
  }
  .town .btn01 a {
    width: 70%;
    margin-left: auto;
    margin-right: 0;
  }
  .town .btn01::before {
    left: -10px;
    /*top: auto;
    bottom: 0;*/
    display: block;
    width: 100px;
  }
  
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1){
    position: relative;
  }
  .town .townList > section:nth-of-type(3) .townBody > div > p:nth-of-type(1) i.cap{
    position: absolute;
    bottom: -22px;
    left: 0;
    white-space: nowrap;
  }

}


.lcc{
  margin: 130px 0 0 0;
  padding: 0 0 100px 0;
}
/*.lcc .chaCopy01{
  padding-left: 0.1em;
  letter-spacing: 0.1em;
}
.lcc .chaCopy01 > span{
  background: linear-gradient(transparent 50%, #faf000 50%);
}*/

.lcc .chaCopy01 + p,
.lcc .chaCopyI + p{
  margin: 70px 0 0 0;
}
.lcc .chaCopy01 + p + figure,
.lcc .chaCopyI + p + figure{
  position: relative;
  max-width: 796px;
  margin: 40px auto 0 auto;
}
/* for sp*/
@media screen and (max-width: 767px) {
  
  .lcc{
    margin-top: 60px;
    padding-bottom: 50px;
  }
  /*.lcc .chaCopy01{
    padding-left: 0.05em;
    letter-spacing: 0.05em;
  }
  .lcc .chaCopy01 > span{}
  */

  .lcc .chaCopy01 + p,
  .lcc .chaCopyI + p{
    margin-top: 20px;
  }
  .lcc .chaCopy01 + p + figure,
  .lcc .chaCopyI + p + figure{
    margin-top: 20px;
  }

}


.checkPoint{
  padding: 0 0 200px 0;
  background: var(--color-white);
}
.checkPoint .conPC{
  max-width: 770px;
}
.checkPoint .icoCP{
  width: 120px;
  margin: 0 auto;
}

.checkPoint .conPC > section{
  padding: 100px 0 0 0;
}

/*.checkPoint .chaCopy01,*/
.checkPoint .chaCopyI{
  margin-top: 45px;
  /*padding-left: 0.15em;
  letter-spacing: 0.15em;*/
}

.checkPoint .unit{
  border: 1px solid #323f2e;
  border-radius: 28px;
}
.checkPoint .conPC > section > section + section{
  margin-top: 80px;
}
.checkPoint .unit.unit01{
  margin-top: 35px;
  padding: 50px 10%;
}
.checkPoint .unit.unit01 .copy03{
  letter-spacing: 0;
  padding-left: 0;
  text-align: center;
}
.checkPoint .unit.unit01 .lead02{
	margin-top: 35px;
  text-align: left;
}


.checkPoint .unit.unit02{
  position: relative;
  margin-top: 50px;
  padding: 80px 4% 15px 4%;
}
.checkPoint .unit.unit02 span{
  position: absolute;
  left: 50%;
  top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: #323f2e;
  border-radius: 50%;
  color: var(--color-white);
  font-size: clamp(calc(35px * var(--font-markup)), calc(35vw / var(--vw-pc)), 35px);/*35 / 25*/
  line-height: 1.0;
  transform: translate(-50%,0);
}
.checkPoint .unit.unit02 figure{
  max-width: 260px;
  margin: 35px auto 0 auto;
}



/* for PC*/
@media screen and (min-width: 768px) {
  .checkPoint .unit.unit02:nth-of-type(2n){
    transition-delay: .1s;
  }
  .checkPoint .unit.unit02 .chaCopy02{
    padding-left: 0;
    letter-spacing: 0;
  }
}


.checkPoint .cpList{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 20px;
}
.checkPoint .cpList li{
  width: calc((7 / 15) * 100%);/*350 / 750*/
}


.checkPoint .cp01 .unit.unit01 figure{
	max-width: 480px;
  margin: 35px auto 0 auto;
}

.checkPoint .cp02 .unit.unit01 figure{
	max-width: 250px;
  margin: 35px auto 0 auto;
}


.checkPoint .cp02 .chaCopy02 + p{
  margin: 50px 0 0 0;
}
.checkPoint .cp02 .graph{
	max-width: 590px;
  margin: 35px auto 0 auto;
}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 840px) and (orientation:portrait) {
  .checkPoint .unit.unit02 span{
    font-size: clamp(calc(35px * var(--font-markup)), calc(35vw / var(--vw-tb)), 35px);/*35 / 25*/
  }
}


/* for sp*/
@media screen and (max-width: 767px) {
  .checkPoint{
    padding-bottom: 80px;
  }
  .checkPoint .conPC{
    max-width: initial;
  }
  .checkPoint .icoCP{
    width: 100px;
  }

  .checkPoint .conPC > section{
    padding-top: 50px;
  }

  .checkPoint .chaCopy01{
    margin-top: 25px;
    padding-left: 0.05em;
    letter-spacing: 0.05em;
  }

  .checkPoint .unit{
    border-radius: 14px;
  }
  .checkPoint .conPC > section > section + section{
    margin-top: 50px;
  }
  .checkPoint .unit.unit01{
    margin-top: 20px;
    padding: 30px 30px;
  }
  .checkPoint .unit.unit01 .copy03{}
  .checkPoint .unit.unit01 .lead02{
    margin-top: 20px;
  }
  .checkPoint .unit.unit02{
    margin-top: 50px;
    padding: 60px 20px 10px 20px;
  }
  .checkPoint .unit.unit02 span{
    top: -20px;
    width: 60px;
    height: 60px;
    font-size: clamp(calc(25px * var(--font-markup)), calc(25vw / var(--vw-sp)), 25px);/*35 / 25*/
  }
  .checkPoint .unit.unit02 figure{
    margin-top: 20px;
  }


  .checkPoint .cpList{
    display: block;
    padding-top: 0;
  }
  .checkPoint .cpList li{
    width: 100%;
  }
  .checkPoint .cpList li + li{
    margin-top: 40px;
  }


  .checkPoint .cp01 .unit.unit01 figure{
    margin-top: 20px;
  }

  .checkPoint .cp02 .unit.unit01 figure{
    width: 80%;
    margin-top: 20px;
  }


  .checkPoint .cp02 .chaCopy02 + p{
    margin-top: 30px;
  }
  .checkPoint .cp02 .graph{
    margin-top: 20px;
  }


}


.review{
  padding: 25px 0 100px 0;
}
.review .charmH .chaCopy01{
  margin-top: 50px;
}
.review .charmH .chaCopy02{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-top: 40px;
  line-height: 1.0;
}
.review .charmH .chaCopy02::before,
.review .charmH .chaCopy02::after{
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: #323f2e;
}
.review .charmH .chaCopy02::before{
  margin: 0 40px 0 0;
  transform: rotate(-20deg);
}
.review .charmH .chaCopy02::after{
  margin: 0 0 0 40px;
  transform: rotate(20deg);
}

/* for PC*/
@media screen and (min-width: 768px) {
  .review .revList{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 50px calc((50 / 1060) * 100%);
    max-width: 1060px;
    margin: 0 auto;
  }
}

.review .revList .unit{
  width: calc((16 / 53) * 100%);/*320 / 1060*/
  padding: 60px 3%;
  background: var(--color-white);
  border: 1px solid #323f2e;
  border-radius: 28px;
}


.review .revList .unit .copy03{
  letter-spacing: 0;
  padding-left: 0;
  text-align: left;
}
.review .revList .unit .lead02{
	margin-top: 25px;
  text-align: left;
}
.review .revList .unit .name{
  display: flex;
  align-items: center;
  height: 50px;
  margin: 40px 0 0 0;
  color: #777; font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-pc)), 15px);/*15 / 14*/
  text-align: left;
  line-height: 1.0;
}
.review .revList .unit .name::before{
  content: "";
  display: block;
  width: 50px;
  height: 100%;
  margin: 0 20px 0 0;
  background: url("../img/charm/ico_review.svg") no-repeat center center;
  background-size: cover;
}

/* for PC*/
@media screen and (min-width: 768px) {
  .review .revList .unit{
    height: auto;
  }
  .review .revList .unit:nth-of-type(3n+2){
    transition-delay: .1s;
  }
  .review .revList .unit:nth-of-type(3n){
    transition-delay: .2s;
  }
}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 840px) and (orientation:portrait) {
  .review .revList{
    gap: 20px;
  }
  .review .revList .unit{
    width: calc((100% - 20px) / 2);
    padding: 40px 3%;
  }
  .review .revList .unit .name{
    margin-top: 20px;
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-tb)), 15px);/*15 / 14*/
  }
  .review .revList .unit:nth-of-type(3n+2){
    transition-delay: unset;
  }
  .review .revList .unit:nth-of-type(3n){
    transition-delay: unset;
  }
  .review .revList .unit:nth-of-type(2n){
    transition-delay: .1s;
  }
}



/* for sp*/
@media screen and (max-width: 767px) {
  .review{
    padding: 25px 0 50px 0;
  }
  .review .charmH .chaCopy01{
    margin-top: 25px;
  }
  .review .charmH .chaCopy02{
    height: 40px;
    margin-top: 30px;
  }
  .review .charmH .chaCopy02::before,
  .review .charmH .chaCopy02::after{}
  .review .charmH .chaCopy02::before{
    margin-right: 10px;
  }
  .review .charmH .chaCopy02::after{
    margin-left: 10px;
  }
  .review .revList{
    /*display: unset;
    gap: unset;
    max-width: initial;*/
  }

  .review .revList .unit{
    width: auto;
    height: auto;
    padding: 30px 20px;
    border-radius: 14px;
  }
  .review .revList .unit .copy03{}
  .review .revList .unit .lead02{
    margin-top: 15px;
  }
  .review .revList .unit .name{
    height: 25px;
    margin-top: 20px;
    color: #777;
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*15 / 14*/
  }
  .review .revList .unit .name::before{
    width: 25px;
    margin-right: 10px;
  }

}



.review .swiper {}
/* for PC*/
@media screen and (min-width: 768px) {
  .review .swiper {
    overflow: visible;
  }
}
.review .swiper-pagination-bullet{
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background-color: #c9caca;
  opacity: 1;
}
.review .swiper-pagination-bullet-active{
  background-color: #202124;
}

.review .swiper-button{
  position: absolute;
  left: calc(50% + 130px);
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 170px;
}

.review .swiper-button-prev,
.review .swiper-button-next{
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 80px;
  height: 40px;
  border: 1px solid #202124;
  border-radius: 200px;
  text-align: left;
  text-indent: -999999px;
  transition: .3s;
}
.review .swiper-button-prev::before,
.review .swiper-button-next::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27px;
  height: 6px;
  background: url("../img/cmn/ico_arrow_col02.svg") no-repeat center center;
  background-size: contain;
  transform: translate(-50%,-50%);
}
.review .swiper-button-prev{
  transform: rotate(180deg);
}

.review .swiper-button-prev:active,
.review .swiper-button-next:active{
  background: #323f2e;
}
.review .swiper-button-prev:active::before,
.review .swiper-button-next:active::before{
  background-image: url("../img/cmn/ico_arrow_wh.svg");
}


/* for PC*/
@media screen and (min-width: 768px) {
  .review .swiper-pagination,
  .review .swiper-button{
    display: none;
  }
}

/* for sp*/
@media screen and (max-width: 767px) {
  /*slide swiper*/
  .review .swiper {
    padding-bottom: 60px;
    /*overflow-x: hidden;*/
  }
  .review .swiper-pagination{
    bottom: 15px;
  }
  .review .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    margin: 0 7px;
  }
  .review .swiper-pagination-bullet-active{}

  .review .swiper-button{
    left: calc(50% + 70px);
    bottom: 10px;
    width: 102px;
  }

  .review .swiper-button-prev,
  .review .swiper-button-next{
    width: 50px;
    height: 30px;
  }
  .review .swiper-button-prev::before,
  .review .swiper-button-next::before{
    width: 18px;
    height: 9px;
  }
  .review .swiper-button-prev{}

  .review .swiper-button-prev:hover,
  .review .swiper-button-next:hover{}
  .review .swiper-button-prev:hover::before,
  .review .swiper-button-next:hover::before{}
  
  .review .swiper .unit[data-aos="ca-slideup"]{
    transform: translateY(0);
  }
}