@charset "UTF-8";

/* =========================================
  Variables
========================================= */

:root {
  --text-main: #121212;
  /* 通常の黒文字 */
  --blue: #004EA2;
  /* 見出し・大きい数字の青 */
  --cyan: #28B7BC;
  /* 強調数字・アクセント文字 */
  --navy: #02007C;
  /* グラフ周辺などの濃紺文字 */
  --white: #FFFFFF;
  /* 白文字 */
}


body {
  color: var(--text-main);
}

html,
body {
  font-family: "Noto Sans JP", sans-serif;
}

/* =========================================
  Layout
========================================= */

.l-inner {}

/* =========================================
  Section 1: p-know
========================================= */

.p-know {
  background: #E7EDF3;
  padding: 115px 0 50px 0;
}

@media screen and (max-width: 1280px) {
  .p-know {
    padding: 67px 0 50px 0;
  }
}

.p-know .p-know__inner {
  max-width: 1200px;
  margin: auto;
}

.p-know .p-know__ttl {
  text-align: center;
  font-size: 42px;
  background: linear-gradient(90deg, #004EA2 0%, #28B7BC 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 54px 0;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__ttl {
    font-size: 26px;
    width: 326px;
    margin: 0 auto 38px auto;
    line-height: 1.5;
  }
}

.p-know .p-know__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* align-items: center; */
  row-gap: 41px;
  column-gap: 40px;
  padding: 0 0 40px 0;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__list {
    width: 350px;
    margin: auto;
    row-gap: 28px;
  }
}

.p-know .p-know__item {
  position: relative;
  width: calc(50% - 20px);
  background: var(--white);
  border-radius: 36px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__item {
    width: calc(100%);
    margin: 0 auto 0 auto;
    height: 352px;
  }
}

.p-know .p-know__item--chart {
  position: relative;
}

.p-know .p-know__dt {
  margin: 29px 0 0px 34px;
}

.p-know .p-know__term {
  font-size: 38px;
  font-weight: 500;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__term {
    font-size: 24px;
  }
}

.p-know .p-know__badge {
  font-size: 24px;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__badge {
    font-size: 16px;
  }
}


.p-know .p-know__canvas {
  position: relative;
}

.p-know .p-know__canvas--text {
  text-align: center;
  position: absolute;
  top: 93%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}

#salesChart {
  width: 400px !important;
  height: 400px !important;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -94%);
}

@media screen and (max-width: 1280px) {
  #salesChart {
    width: 400px !important;
    height: 400px !important;
    transform: translate(-50%, -92%);
  }
}

.p-know .p-know__imgbox {
  position: absolute;
  height: 227px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-know .p-know__imgbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-know .p-know__imgbox--h100 {
  height: 100px;
}

.p-know .p-know__imgbox--h110 {
  height: 110px;
}

.p-know .p-know__imgbox--h120 {
  height: 120px;
}

.p-know .p-know__imgbox--h130 {
  height: 130px;
}

.p-know .p-know__imgbox--h136 {
  height: 136px;
}

.p-know .p-know__imgbox--h140 {
  height: 140px;
}

.p-know .p-know__imgbox--h150 {
  height: 150px;
}

.p-know .p-know__imgbox--h160 {
  height: 160px;
}

.p-know .p-know__imgbox--h170 {
  height: 170px;
}

.p-know .p-know__imgbox--h180 {
  height: 180px;
}

.p-know .p-know__imgbox--h190 {
  height: 190px;
}

.p-know .p-know__imgbox--h200 {
  height: 200px;
}

.p-know .p-know__imgbox--h210 {
  height: 210px;
}

.p-know .p-know__imgbox--h220 {
  height: 220px;
}

.p-know .p-know__imgbox--h230 {
  height: 230px;
}

.p-know .p-know__imgbox--h240 {
  height: 240px;
}

.p-know .p-know__imgbox--h250 {
  height: 250px;
}

.p-know .p-know__imgbox--h100 img {
  height: 100px;
}

.p-know .p-know__imgbox--h110 img {
  height: 110px;
}

.p-know .p-know__imgbox--h120 img {
  height: 120px;
}

.p-know .p-know__imgbox--h130 img {
  height: 130px;
}

.p-know .p-know__imgbox--h140 img {
  height: 140px;
}

.p-know .p-know__imgbox--h150 img {
  height: 150px;
}

.p-know .p-know__imgbox--h160 img {
  height: 160px;
}

.p-know .p-know__imgbox--h170 img {
  height: 170px;
}

.p-know .p-know__imgbox--h180 img {
  height: 180px;
}

.p-know .p-know__imgbox--h190 img {
  height: 190px;
}

.p-know .p-know__imgbox--h200 img {
  height: 200px;
}

.p-know .p-know__imgbox--h210 img {
  height: 210px;
}

.p-know .p-know__imgbox--h220 img {
  height: 220px;
}

.p-know .p-know__imgbox--h230 img {
  height: 230px;
}

.p-know .p-know__imgbox--h240 img {
  height: 240px;
}

.p-know .p-know__imgbox--h250 img {
  height: 250px;
}

.top-0 {
  top: 0%;
}

.top-10 {
  top: 10%;
}

.top-20 {
  top: 20%;
}

.top-30 {
  top: 30%;
}

.top-33 {
  top: 33%;
}

.top-34 {
  top: 34%;
}

.top-37 {
  top: 37%;
}

.top-40 {
  top: 40%;
}

.top-42 {
  top: 42%;
}

.top-44 {
  top: 44%;
}

.top-50 {
  top: 50%;
}

.top-60 {
  top: 60%;
}

.top-70 {
  top: 70%;
}

.top-72 {
  top: 72%;
}

.top-75 {
  top: 75%;
}

.top-80 {
  top: 80%;
}

.top-89 {
  top: 89%;
}

.top-90 {
  top: 90%;
}

.top-100 {
  top: 100%;
}

.p-know .p-know__item-1 .p-know__imgbox {
  height: 190px;
  top: 37%;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__item-1 .p-know__imgbox {
    height: 148px;
    top: 42%;
  }
}

.p-know .p-know__item-2 .p-know__imgbox {
  height: 136px;
  top: 42%;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__item-2 .p-know__imgbox {
    height: 116px;
    top: 42%;
  }
}

.p-know .p-know__item-3 .p-know__imgbox {
  height: 120px;
  top: 44%;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__item-3 .p-know__imgbox {
    height: 120px;
    top: 46%;
    width: 249px;
  }
}

.p-know .p-know__item-4 .p-know__imgbox {
  height: 120px;
  top: 44%;
}

.p-know .p-know__item-6 .p-know__imgbox {
  height: 120px;
  top: 44%;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__item-6 .p-know__imgbox {
    height: 120px;
    top: 47%;
    width: 214px;
  }
}

.p-know .p-know__item-7 .p-know__imgbox {
  height: 161px;
  top: 41%;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__item-7 .p-know__imgbox {
    height: 136px;
    top: 44%;
  }
}

.p-know .p-know__item-8 .p-know__imgbox {
  height: 128px;
  top: 40%;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__item-8 .p-know__imgbox {
    height: 123px;
    top: 45%;
  }
}

.p-know .p-know__text {
  margin: auto auto 33px auto;
  width: fit-content;
}

.p-know .p-know__text2 {
  margin: auto auto 24px auto;
  width: fit-content;
}

.p-know .p-know__data {
  text-align: center;
  font-size: 30px;
  overflow: hidden;
}

.p-know .p-know__data--gradation {
  background: linear-gradient(90deg, #004EA2 0%, #28B7BC 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__data {
    font-size: 20.6px;
  }
}

.p-know .p-know__num {
  display: inline-block;
  font-size: 90px;
  line-height: 1;
  font-family: Overpass;
  letter-spacing: 5px;
}

@media screen and (max-width: 1280px) {
  .p-know .p-know__num {
    font-size: 61.8px;
    letter-spacing: 2px;
  }
}

.p-know .p-know__sep {
  display: inline-block;
  background: var(--text-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 6px 0 0;
}

.p-know .p-know__text--sub {
  text-align: right;
  font-size: 14px;
  margin: 4px 0 0 0;
  position: relative;
  top: -10%;
}

/* =========================================
  Section 2: p-trust
========================================= */

/* =========================================
  Section 3: p-share
========================================= */

.p-share {
  /*background: #E7EDF3;*/
  padding: 33px 0 110px 0;
}

@media screen and (max-width: 1280px) {
  .p-share {
    /*background: #E7EDF3;*/
    padding: 40px 0 80px 0;
  }
}

.p-share .p-share__inner {
  max-width: 1200px;
  margin: auto;
}

.p-share .p-share__ttl {
  text-align: center;
  font-size: 42px;
  background: linear-gradient(90deg, #004EA2 0%, #28B7BC 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 60px 0;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__ttl {
    font-size: 26px;
    width: 326px;
    margin: 0 auto 42px auto;
    line-height: 1.5;
  }
}

.p-share .p-share__body {
  background: #FFFFFF;
  border-radius: 40px;
  padding: 62px 0 54px 0;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__body {
    width: 350px;
    margin: auto;
    row-gap: 28px;
    padding: 49px 0 23px 0;
  }
}

.p-share .p-share__heading {
  text-align: center;
  margin: 0 0 73px 0;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__heading {
    margin: 0 0 23px 0;
  }
}

.p-share .p-share__heading-main {
  font-size: 38px;
  font-weight: 500;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__heading-main {
    font-size: 24px;
  }
}

.p-share .p-share__heading-sub {
  font-size: 20px;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__heading-sub {
    font-size: 14px;
  }
}

.p-share .p-share__col {
  position: relative;
}

.p-share .p-share__col-japan {
  margin: 0 0 109px 0;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__col-japan {
    margin: 0 0 24px 0;
  }
}

.p-share .p-share__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 8px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(90deg, #004EA2 0%, #28B7BC 55%) border-box;

  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: content-box;
  top: 30%;

}

@media screen and (max-width: 1280px) {
  .p-share .p-share__circle {
    width: 114px;
    height: 114px;
    border: 4px solid transparent;
  }
}

.p-share .p-share__region {
  margin: 0;
  font-size: 32px;
  color: var(--text-main);
  position: absolute;
  top: 15%;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__region {
    font-size: 15px;
    top: 12px;
  }
}

.p-share .p-share__pct {
  margin: 0;
  font-weight: bold;
  background: linear-gradient(90deg, #004EA2 0%, #28B7BC 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: absolute;
  top: 22%;
  line-height: 1.3;
}

.p-share .p-share__pct-number {
  display: inline-block;
  font-size: 135px;
  font-family: Overpass;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__pct-number {
    font-size: 54px;
  }
}

.p-share .p-share__pct-unit {
  display: inline-block;
  font-size: 40px;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__pct-unit {
    font-size: 16px;
  }
}

.p-share .p-share__chart {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 236px;
  top: 69%;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__chart {
    width: 100px;
    top: 66%;
  }

  .p-share .p-share__chart-overseas {
    top: 75%;
  }
}

.p-share .p-share__map {
  display: block;
  margin: auto;
}

.p-share .p-share__map-japan {
  width: 100%;
  max-width: 600px;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__map-japan {
    max-width: 260px;
  }
}

.p-share .p-share__map-overseas {
  width: 100%;
  max-width: 1038px;
}

.p-share .p-share__note {
  text-align: center;
  font-size: 14px;
  margin: 61px 0 0 0;
}

@media screen and (max-width: 1280px) {
  .p-share .p-share__note {
    margin: 30px 0 0 0;
  }
}

/* =========================================
  Section 4: p-model
========================================= */

/* =========================================
  Section 5: p-goal
========================================= */



.u-br-sp {
  display: none;
}

.u-br-pc {
  display: inline;
}


/* =========================================
改行
========================================= */
@media screen and (max-width: 1280px) {
  .u-br-sp {
    display: inline;
  }

  .u-br-pc {
    display: none;
  }
}