@charset "utf-8";

/**
 *
 *  ページ用CSS
 *nearby
 */

/*--------------------------------------------------------------------------
	Overwright
---------------------------------------------------------------------------*/
.content{
	font-family: YakuHanMP, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
}

.eb {
	font-family: "EB Garamond", serif;
	font-weight: 400;
}

.ib {
  display: inline-block;
}

.secCopy {
  color: #003264;
  font-size: clamp(20px, 0.22rem + 2.32vw, 30px);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.secTxt {
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 2.2;
}

.opa {
	transition: opacity .5s;
}

@media (hover: hover) and (pointer: fine) {
	.opa:hover {
		opacity: .7;
	}
}

/* swipe
---------------------------------------------- */
.swipe{
  position: relative;
  overflow: auto;
  -ms-overflow-style:none;
}
.swipe::-webkit-scrollbar{
  display: none;
}
.swipeInner{
  position: relative;
}
.swipeInner::after{
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  height: 1px;
}
.swipeInner img{
  vertical-align: top;
}
.swipeCaution{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../asset/img/nearby/icon_scrollCaution.svg) no-repeat center/203px auto rgba(51,51,51,.8);
  pointer-events: none;
  transition: .4s ease;
}
.swipeCaution.is-hidden{
  opacity: 0;
  visibility: visible;
}

/* kv
---------------------------------------------- */
.kv {
  position: relative;
  z-index: 0;
}

.kv__txt {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(0, -50%);
  z-index: 1;
}
.kv__en {
  color: #fff;
  font-size: clamp(22px, 0.31rem + 2.46vw, 40px);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: -20px;
}
.kv__ja {
  font-size: clamp(20px, -0.52rem + 3.28vw, 44px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.kv__ja .text {
  background: linear-gradient(135deg, rgba(196, 168, 118, 1) 18.12%, rgba(252, 237, 201, 1) 39.53%, rgba(250, 235, 197, 1) 40.32%, rgba(242, 223, 178, 1) 45.46%, rgba(237, 215, 166, 1) 50.65%, rgba(235, 213, 162, 1) 55.96%, rgba(229, 205, 154, 1) 57.76%, rgba(203, 176, 124, 1) 65.76%, rgba(194, 165, 112, 1) 70.24%, rgba(232, 212, 167, 1) 88.97%, rgba(251, 235, 194, 1) 99.76%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-top: 1em;
}
.kv__ja .em {
  font-style: normal;
  font-size: calc(64 / 44 * 100%);
  line-height: 1;
}
.kv__ja .num {
  font-style: normal;
  font-size: calc(124 / 44 * 100%);
  line-height: 1;
}

.kv .p-caption {
  bottom: 10px;
}

@media screen and (max-width: 768px) {
  .kv__txt {
    left: 6%;
  }
  .kv__en {
    margin-bottom: 0;
  }
  .kv__ja .num {
    font-size: calc(50 / 24 * 100%);
  }

  .kv .p-caption {
    bottom: 4px;
  }
}

/* campeignBnrArea
---------------------------------------------- */
.campaignBnrArea {
  padding-top: 120px;
}
.campaignBnr {
  max-width: 1140px;
}
.campaignBnr__link {
  display: block;
  box-shadow: 0 0 10px rgba(51 51 51 / .15);
}

@media screen and (max-width: 768px) {
  .campaignBnrArea {
    padding-top: 60px;
  }
  .campaignBnr {
    max-width: 400px;
    padding-inline: 27.5px;
  }
}

/* intro
---------------------------------------------- */
.intro {
  padding-top: 120px;
}

.intro__ttl {
  color: #003264;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
}
.intro__ttl::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background-color: #003264;
  margin-top: 35px;
  margin-inline: auto;
}

.intro__txt {
  margin-top: 35px;
  text-align: center;
}

.graph {
  max-width: 1240px;
  margin-top: 70px;
}

.graphBox {
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(244, 244, 244, 1) 100%);
  box-shadow: 0 0 10px rgb(51 51 51 / .25);
  padding: 10px;
  position: relative;
  z-index: 0;
}

.graphBox__inner {
  border: 1px solid #a2b1c8;
  padding: 70px 60px 50px;
}
.graph__title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  column-gap: 1em;
  color: #163b76;
  font-size: clamp(16px, 0.55rem + 1.37vw, 26px);
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-align: center;
}
.graph__title::before,
.graph__title::after {
  content: '';
  display: block;
  width: 31px;
  height: 51px;
  background: url(../img/nearby/figure_title.svg) center/contain no-repeat;
}
.graph__title::after {
  transform: scaleX(-1);
}

.graph__title .num {
  font-style: normal;
  font-size: calc(70 / 26 * 100%);
  line-height: 1;
}

.graph__copy {
  font-size: clamp(17px, 0.33rem + 1.78vw, 30px);
  letter-spacing: 0.05em;
  line-height: 1.67;
  margin-top: 1em;
  text-align: center;
}
.graph__copy .marker {
  background: linear-gradient(transparent 75%, rgb(125 18 46 / .5) 0%);
  font-style: normal;
  padding-inline: 2px;
}

.graphItem {
  max-width: 900px;
  margin-top: 40px;
  margin-inline: auto;
}

.graphItem__title {
  font-size: clamp(10px, 0.16rem + 1.09vw, 18px);
  letter-spacing: 0.1em;
  line-height: 1.4;
  padding-left: 1em;
  text-indent: -1em;
}
.valueGraph__img {
  margin-top: 15px;
}
.graphItem__caption {
  margin-top: 25px;
}
.graphItem__caption > li {
  color: #666;
  font-size: 10px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  padding-left: 1em;
  text-indent: -1em;
}

@media screen and (max-width: 768px) {
  .intro {
    padding-top: 70px;
  }

  .intro__ttl {
    font-size: 16px;
  }
  .intro__ttl::after {
    width: 40px;
    margin-top: 25px;
  }

  .intro__txt {
    letter-spacing: 0.05em;
    margin-top: 25px;
    padding-inline: 10px;
  }

  .graph {
    max-width: 400px;
    margin-top: 40px;
  }

  .graphBox {
    box-shadow: 0 0 5px rgb(51 51 51 / .25);
    padding: 5px;
  }

  .graphBox__inner {
    padding: 20px;
  }
  .graph__title {
    column-gap: .5em;
  }
  .graph__title::before,
  .graph__title::after {
    width: 17px;
    height: 26px;
    background-image: url(../img/nearby/figure_title_sp.svg);
  }

  .graph__title .num {
    font-size: calc(70 / 26 * 100%);
  }

  .graph__copy {
    line-height: 1.76;
    margin-top: .5em;
  }

  .graphItem {
    max-width: 260px;
    margin-top: 25px;
  }

  .valueGraph__img {
    margin-top: 10px;
  }
  .graphItem__caption {
    margin-top: 20px;
  }
}

/* contents
---------------------------------------------- */
.contents .inner {
  max-width: 1240px;
}

@media screen and (max-width: 768px) {
  .contents .inner {
    max-width: 560px;
    padding-inline: 27.5px;
  }
}

/* anchorNav
---------------------------------------------- */
.anchorNav {
  padding-top: 100px;
}
.anchorNavList {
  max-width: 1070px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(20 / 1070 * 100%);
  margin-inline: auto;
}

.anchorNavList__btn {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: calc(25 / 441 * 100%);
  padding-top: 12px;
  padding-inline: 42px;
  z-index: 0;
}
.anchorNavList__btn._parent {
  justify-content: flex-end;
}
.anchorNavList__btn::before,
.anchorNavList__btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .4s ease;
}
.anchorNavList__btn::before {
  background-color: rgb(204 204 204 / .8);
  z-index: -2;
}
.anchorNavList__btn::after {
  opacity: 0;
  z-index: -1;
}
.anchorNavList__btn._child::after {
  background: linear-gradient(90deg, rgba(40, 91, 158, 1) 0%, rgba(23, 73, 133, 1) 33.76%, rgba(6, 56, 109, 1) 74.77%, rgba(0, 50, 100, 1) 100%);
}
.anchorNavList__btn._parent::after {
  background: linear-gradient(90deg, rgba(210, 170, 90, 1) 0%, rgba(206, 167, 90, 1) 7.73%, rgba(182, 151, 89, 1) 64.86%, rgba(173, 145, 89, 1) 100%);
}

.anchorNavList__btn .img {
  width: calc(154 / 441 * 100%);
  opacity: .5;
  transition: .4s ease;
}

.anchorNavList__btn .txtBox {
  flex: 1;
  position: relative;
  padding-top: 10px;
  z-index: 0;
}
.anchorNavList__btn .txtBox::after {
  content: '';
  display: block;
  width: 30px;
  height: 20px;
  background: url(../../asset/img/nearby/icon_arrow-u.svg) center/contain no-repeat;
  margin-top: 7px;
  margin-inline: auto;
}

.anchorNavList__txt {
  color: #fff;
  font-size: clamp(14px, 0.33rem + 1.39vw, 20px);
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: center;
}

/* is-active */
.anchorNavList__btn.is-active::after {
  opacity: 1;
}
.anchorNavList__btn.is-active .img {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .anchorNav {
    padding-top: 60px;
  }
  .anchorNavList {
    max-width: 560px;
    column-gap: 2px;
  }

  .anchorNavList__btn {
    justify-content: center;
    padding-block: 15px 4px;
    padding-inline: 10px;
  }
  .anchorNavList__btn._parent {
    justify-content: center;
  }

  .anchorNavList__btn .img {
    display: none;
  }

  .anchorNavList__btn .txtBox {
    padding-top: 0;
  }
  .anchorNavList__btn .txtBox::after {
    width: 22.5px;
    height: 15px;
    margin-top: 3px;
  }
}

/* pointSec
---------------------------------------------- */
.pointSec {
  position: relative;
  padding-block: 90px 150px;
  z-index: 0;
}

.pointSec__copy {
  font-size: clamp(24px, -0.45rem + 3.71vw, 40px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}
.pointSec__copy .em {
  font-size: 130%;
  font-style: normal;
  letter-spacing: 0.1em;
}

.pointSec__txt {
  margin-top: 1.5em;
  text-align: center;
}

.pointList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px calc(60 / 1200 * 100%);
  margin-top: 65px;
}

.pointList > li {
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0 0 0 / .15);
  z-index: 0;
}

.pointList__inner {
  padding: calc(60 / 570 * 100%);
}

.pointList__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.47;
  text-align: center;
}

.pointList__txt {
  margin-top: 1.5em;
}

.pointList__icon {
  position: absolute;
  top: -30px;
  left: -30px;
  width: calc(130 / 570 * 100%);
  z-index: 1;
}

.pointBox {
  max-width: 1260px;
  margin-top: 100px;
}

.pointBox__inner {
  background-color: #fff;
  border: 10px solid;
  padding: 60px calc(70 / 1200 * 100%) 65px;
}

.pointBox__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1.5em;
}
.pointBox__copy .txt {
  line-height: 1.6;
  border-bottom: 2px dashed #8098b1;
  padding-bottom: 0.3em;
  text-align: center;
}

.pointBox__illust {
  width: 72px;
}

.pointBox__contents {
  display: flex;
  justify-content: space-between;
  column-gap: calc(60 / 1040 * 100%);
  margin-top: 25px;
}

.pointBox__head {
  flex: 1;
}

.pointBox__txt {
  text-align: justify;
}

.pointBox__body {
  width: calc(690 / 1040 * 100%);
}

.pointBox__note {
  color: #666;
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  padding-left: 1em;
  text-indent: -1em;
}
* + .pointBox__note {
  margin-top: 1em;
}

/* child */
.pointSec._child {
  background-color: #e9f2f8;
}

.pointSec._child .pointSec__copy .color-em {
  color: #003264;
}

.pointSec._child .pointBox__inner {
  border-color: #ccd6e0;
}


/* parent */
.pointSec._parent {
  background-color: #f7f4ee;
}

.pointSec._parent .pointSec__copy .color-em {
  color: #ad9159;
}

.pointSec._parent .pointBox__inner {
  border-color: #efe9de;
}

.noTaxList {
  margin-top: 20px;
}

.noTaxList > li {
  position: relative;
  color: #003264;
  font-size: clamp(12px, 0.31rem + 1.16vw, 17px);
  letter-spacing: 0.1em;
  line-height: 1.8;
  padding-left: 1.5em;
  text-indent: -1.5em;
  z-index: 0;
}
.noTaxList > li + li {
  margin-top: 5px;
}

.pointBox__other {
  background-color: #e5eaef;
  color: #003264;
  font-size: clamp(16px, 0.53rem + 1.39vw, 22px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-top: 30px;
  padding: 1em;
  text-align: center;
}

.value {
  margin-top: 100px;
}

.value__copy {
  text-align: center;
}

.value__txt {
  font-size: clamp(14px, 0.69rem + 0.93vw, 18px);
  letter-spacing: 0.1em;
  line-height: 2.3;
  margin-top: 1em;
  text-align: center;
}

.valueContents {
  margin-top: 50px;
}

.valueList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(36 / 1200 * 100%);
}

.valueList > li {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0 0 0 / .15);
}

.valueList__inner {
  padding: calc(30 / 376 * 100%) calc(40 / 376 * 100%);
}

.valueList__num {
  color: #003264;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}
.valueList__num .num {
  display: block;
  font-style: normal;
  font-size: clamp(40px, 2.22rem + 2.32vw, 50px);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.valueList__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  margin-top: 25px;
  text-align: center;
}

.valueList__txt {
  margin-top: 1.5em;
  text-align: justify;
}

@media screen and (max-width: 768px) {
  .pointSec {
    padding-block: 50px;
  }

  .pointSec__txt.inner {
    padding-inline: 10px;
  }

  .pointList {
    grid-template-columns: 1fr;
    row-gap: 45px;
    margin-top: 35px;
  }

  .pointList__inner {
    padding: calc(25 / 320 * 100%);
    padding-top: 45px;
  }

  .pointList__copy {
    line-height: 1.6;
  }

  .pointList__txt {
    margin-top: 1em;
  }

  .pointList__icon {
    left: -20px;
    width: 80px;
  }

  .pointBox {
    max-width: 560px;
    margin-top: 40px;
  }

  .pointBox__inner {
    border-width: 5px;
    padding: 30px calc(20 / 320 * 100%);
  }

  .pointBox__copy {
    flex-wrap: wrap;
    gap: 2px 5px;
  }
  .pointBox__copy .txt {
    order: 2;
    width: 100%;
    padding-bottom: .6em;
  }

  .pointBox__illust {
    width: 50px;
  }
  .pointBox__illust:nth-child(2) {
    order: 1;
  }

  .pointBox__contents {
    flex-direction: column;
    row-gap: 15px;
  }

  .pointBox__head {
    flex: revert;
  }

  .pointBox__body {
    width: 100%;
  }

  /* parent */
  .noTaxList {
    margin-top: 15px;
  }

  .pointBox__other {
    margin-top: 20px;
  }

  .value {
    margin-top: 50px;
  }

  .value__txt.inner {
    letter-spacing: 0.05em;
    line-height: 2.2;
    padding-inline: 0;
  }

  .valueContents {
    margin-top: 35px;
  }

  .valueList {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .valueList__inner {
    padding: 30px calc(25 / 320 * 100%);
  }

  .valueList__num {
    font-size: 11px;
  }
}