@charset "UTF-8";
/* CSS Document */

/* ---------------------------------
共通クラス上書き
---------------------------------- */
img {
  display: block;
  object-fit: contain;
}
em {
  font-style: normal;
}
.lowHeading {
  height: 695px;
}
.lowHeading img {
  object-position: bottom;
  height: 448px;
}
.lowHeadingTxt {
  position: absolute;
  top: 370px;
}
.lowHeadingTxt p {
  padding-left: 70px;
}

#mainContents section {
  border-top: 0;
}
#mainContents > section {
  border-top: 2px solid black;
}

#mainContents .inner.o-contents-wrapper {
  padding-bottom: 223px;
}

@media only screen and (max-width: 768px) {
  .lowHeading {
    /* height: 760px; */
    height: auto;
    padding-top: 140px;
  }
  .lowHeading img {
    object-position: top;
    height: 569px;
  }
  .lowHeading .inner01 {
    justify-content: stretch;
    padding: 0 0 20px;
  }
  .lowHeading .h1_ptn1 {
    min-height: initial;
    min-height: 104px;
    padding: 31px 21px 0 21px;
  }
  .lowHeadingTxt {
    top: auto;
    position: relative;
    margin-top: 328px;
  }
  .lowHeadingTxt p {
    padding-right: 17px;
    padding-left: 17px;
    min-height: initial;
  }
  #mainContents .inner.o-contents-wrapper {
    padding-bottom: 0;
    padding-inline: 0;
    background-color: #f4f4f4;
  }
  #mainContents .inner::after {
    left: 20px;
  }
}

/* ---------------------------------
固有クラス
---------------------------------- */

@media (max-width: 768px) {
  .only-pc {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .only-sp {
    display: none !important;
  }
}


.p-about {
  z-index: 0;
  position: relative;
}
.p-about-inner {
  max-width: 1100px;
  padding: 0 20px;
  margin-top: 104px;
  margin-inline: auto;
  @media screen and (max-width: 768px) {
    margin-top: 17px;
  }
}
.p-about-inner:not(:first-child){
  margin-top: 70px;
  @media screen and (max-width: 768px) {
    margin-top: 20px;
  }
}

.p-about-inner-color1 {
  @media screen and (max-width: 768px) {
    background-color: #fff;
    padding-top: 67px;
		padding-bottom: 34px;
  }
}
.p-about-inner-color2:not(:first-child) {
	margin-top: 86px;
  @media screen and (max-width: 768px) {
    background-color: #f4f4f4;
    padding: 5px 0 0;
		margin-top: 34px;
  }
}
.p-about-inner-color2:last-child {
	margin-top: 64px;
  @media screen and (max-width: 768px) {
		margin-top: 0;
    padding-top: 41px;
    padding-bottom: 200px;
    background-color: #fff;
  }
}
.p-about-section {
  background: #f4f4f4;
  padding: 40px 30px 30px;
  border-radius: 15px;
  position: relative;
  @media screen and (max-width: 768px) {
    padding: 0;
  }
}
.p-about-section + .p-about-section,
.p-about-section + .p-about-section-wrapper {
  margin-top: 70px;
  @media screen and (max-width: 768px) {
    margin-top: 67px;
  }
}
.p-about-heading {
  color: #000;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-left: 45px;
  z-index: 1;
  position: absolute;
  left: 30px;
  top: -34px;
  @media screen and (max-width: 768px) {
    font-size: 20px;
    line-height: 1.3;
    padding-left: 24px;
    letter-spacing: .05em;
    top: -14px;
    left: 0;
  }
}

.p-about-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: -16px;
  background: url(../img/ico_flag.svg) no-repeat;
  background-size: contain;
  width: 92px;
  height: 91px;
  z-index: -1;
  @media screen and (max-width: 768px) {
    width: 52px;
    height: 52px;
  }
}
.p-about-heading-sm {
	@media screen and (max-width: 768px) {
		font-size: 18px;
		padding-left: 45px;
		letter-spacing: -.01em;
	}
}
.p-about-heading-sm::before {
  @media screen and (max-width: 768px) {
    top: -9px;
    left: 15px;
    width: 60px;
    height: 60px;
  }
}
.p-about-card {
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  @media screen and (max-width: 768px) {
    border-radius: 10px;
  }
}
.p-about-card + .p-about-card,
.p-about-card + .p-about-flex,
.p-about-flex + .p-about-card {
  margin-top: 30px;
  @media screen and (max-width: 768px) {
    margin-top: 20px;
  }
}
.p-about-flex > .p-about-card + .p-about-card {
  margin-top: 0;
}
.p-about-flex + .p-about-card-04 {
  @media screen and (max-width: 768px) {
    margin-top: 66px;
  }
}
.p-about-card-01 {
  padding: 52px 20px 252px 20px;
  @media screen and (max-width: 768px) {
    padding: 45px 20px 53vw 30px;
  }
}
.p-about-card-01::before,
.p-about-card-02::before,
.p-about-card-03::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  @media screen and (max-width: 768px) {
    width: auto;
    height: auto;
    padding-top: 100%;
  }
}
.p-about-card-01::before {
  background: url(../img/img_illust_01.svg) no-repeat center bottom;
  background-size: contain;
  @media screen and (max-width: 768px) {
    background-size: cover;
    background-position: left 45% bottom;
    padding-top: 115%;
  }
}
.p-about-card-02 {
  padding: 31px 41px 154px 43px;
  @media screen and (max-width: 768px) {
    padding: 27px 21px 41vw 19px;
  }
}
.p-about-card-02::before {
  background: url(../img/img_illust_02.svg) no-repeat center bottom;
  background-size: contain;
  @media screen and (max-width: 768px) {
    background-size: cover;
    padding-top: 53%;
  }
}
.p-about-card-03 {
  padding: 34px 41px 196px 43px;
  @media screen and (max-width: 768px) {
    padding: 25px 21px 35vw 21px;
  }
}
.p-about-card-03::before {
  background: url(../img/img_illust_03.svg) no-repeat center bottom;
  background-size: 59% auto;
  @media screen and (max-width: 768px) {
    background-size: 68% auto;
    padding-top: 59%;
  }
}

.p-about-card-04 {
  display: grid;
  grid-template-columns: 30% 27% 1fr;
  gap: 27px;
  padding: 37px 40px 43px;
  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    padding: 28px 21px 28px;
    gap: 32px;
  }
}
.p-about-card-04 > .p-about-card_block:last-of-type {
  margin-left: 18px;
  @media screen and (max-width: 768px) {
    margin-left: 0;
  }
}
.p-about-card-04 > .p-about-card_block:nth-of-type(2) {
  @media screen and (max-width: 768px) {
    margin-top: 13px;
  }
}

.p-about-card_heading > img {
  max-width: 100%;
  height: auto;
}

.p-about-card_heading > .p-about-card_img-01 {
  @media screen and (max-width: 768px) {
    max-width: 274px;
  }
}
.p-about-card_heading > .p-about-card_img-02 {
  margin-inline: auto;
  @media screen and (max-width: 768px) {
    max-width: 174px;
  }
}
.p-about-card_heading > .p-about-card_img-03 {
  @media screen and (max-width: 768px) {
    max-width: 288px;
  }
}

.p-about-card_inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* padding: 0 20px; */
  gap: 35px;
  @media screen and (max-width: 768px) {
    flex-direction: column;
    gap: 18px;
  }
}

.p-about-card_block2 {
  max-width: 44.8%;
  @media screen and (max-width: 768px) {
    max-width: 100%;
  }
}
.p-about-card_text {
  color: #000;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.05em;
  @media screen and (max-width: 768px) {
    font-size: 14px;
  }
}
.p-about-card_text-lh {
  line-height: 1.75;
  @media screen and (max-width: 768px) {
    line-height: 2;
  }
}
.p-about-card_heading + .p-about-card_text {
  margin-top: 14px;
  @media screen and (max-width: 768px) {
    margin-top: 16px;
  }
}
.p-about-card_heading + .p-about-card_text-03 {
  margin-top: 30px;
  @media screen and (max-width: 768px) {
    margin-top: 27px;
  }
}

.p-about-card_text > em {
  font-weight: 700;
}

.p-about-flex {
  display: flex;
  gap: 30px;
  @media screen and (max-width: 768px) {
    flex-direction: column;
    gap: 20px;
  }
}

.p-about-card_headline {
  color: #000;
  text-box: trim-both cap alphabetic;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
  @media screen and (max-width: 768px) {
    font-size: 17px;
  }
}

.p-about-card_list {
  padding-left: 1.5em;
}
.p-about-card_list > li {
  color: #000;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  list-style: disc;
  @media screen and (max-width: 768px) {
    font-size: 14px;
    line-height: 2;
  }
}
.p-about-card_list > li + li {
  margin-top: 1em;
}
.p-about-card_list > li > em {
  font-weight: 700;
}
.p-about-card_headline + .p-about-card_list {
  margin-top: 27px;
}

.p-about-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  align-items: start;
  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
		grid-template-rows: repeat(auto-fit, minmax(0, 4fr));
    row-gap: 45px;
  }
}
.p-about-section-grid_cell {
  height: auto;
}
.p-about-section-grid_cell:last-of-type {
	margin-bottom: 0;
}
.p-about-section-grid_cell.cell01 {
  padding: 53px 7px 31px 16px;
  @media screen and (max-width: 768px) {
    padding: 35px 3px 11px 17px;
  }
}
.p-about-section-grid_cell.cell02 {
  margin-top: 130px;
  padding: 40px 30px 25px;
  @media screen and (max-width: 768px) {
    margin-top: 0;
    padding: 35px 14px 9px 15px;
  }
}
.p-about-section-grid_cell.cell03 {
  margin-top: 0;
  @media screen and (max-width: 768px) {
    padding: 35px 14px 9px 15px;
  }
}
.p-about-section-grid_cell.cell04 {
  margin-top: 70px;
  @media screen and (max-width: 768px) {
    margin-top: 0;
    padding: 35px 14px 9px 15px;
  }
}

.p-about-word {
  background-color: #fff;
  padding: 17px 15px;
  border-radius: 10px;
  display: inline-block;
  text-box: trim-end cap alphabetic;
	@media screen and (max-width: 768px) {
		padding: 9px 10px;
		min-width: 140px;
	}
}

:where(.p-about-word) > img {
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
	.p-about-word.word01 {max-width: 81.6%;}
	.p-about-word.word02 {max-width: 58.3%;}
	.p-about-word.word03 {max-width: 96.8%;}
	.p-about-word.word04 {max-width: 95%;}
	.p-about-word.word05 {max-width: 99.7%;}
	.p-about-word.word06 {max-width: 88.8%;}
	.p-about-word.word07 {max-width: 94.3%;}
	.p-about-word.word08 {max-width: 84.5%;}
	.p-about-word.word09 {max-width: 72.4%;}
	.p-about-word.word10 {max-width: 58.4%;}
	.p-about-word.word11 {max-width: 66.6%;}
	.p-about-word.word12 {max-width: 61%;}
	.p-about-word.word13 {max-width: 47%;}
	.p-about-word.word14 {max-width: 64%;}
	.p-about-word.word15 {max-width: 100%;}
	.p-about-word.word16 {max-width: 78.5%;}
	.p-about-word.word17 {max-width: 69%;}
	.p-about-word.word18 {max-width: 50.7%;}
	.p-about-word.word19 {max-width: 80.3%;}
	.p-about-word.word20 {max-width: 99.5%;}
	}

.p-about-word + .p-about-word {
  margin-top: 13px;
	@media screen and (max-width: 768px) {
		margin-top: 8px;
	}
}

.p-about-bottom-item {
  margin-top: 31px;
  text-align: center;
  @media screen and (max-width: 768px) {
    margin-top: 21px;
  }
}
.p-about-bottom-item > img{
  max-width: 100%;
  height: auto;
  display: inline;
}
.p-about-bottom-item-02 {
  margin-top: 22px;
	@media screen and (max-width: 768px) {
		margin-top: 13px;
	}
}
.p-about-bottom-item-03 {
  margin-top: 59px;
	@media screen and (max-width: 768px) {
		margin-top: 40px;
	}
}
.p-about-bottom-item-04 {
  margin-top: 16px;
	@media screen and (max-width: 768px) {
		margin-top: 11px;
	}
}

.p-about-bottom-item-02 >img{
	@media screen and (max-width: 768px) {
  	max-width: 67%;
	}
}
.p-about-bottom-item-03 >img{
	@media screen and (max-width: 768px) {
  	max-width: 92%;
	}
}
.p-about-bottom-item-04 >img{
	@media screen and (max-width: 768px) {
  	max-width: 76%;
	}
}

.p-about-section-voice {
  position: relative;
	padding: 35px 0 146px;
  @media screen and (max-width: 768px) {
    padding: 35px 0 122px;
    border-radius: 0;
  }
}
.p-about-section-voice::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/bg_voice.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
  @media screen and (max-width: 768px) {
    background-size: 205%;
    background-position: bottom left 48%;
  }
}
.p-about-full-img {
  margin-inline: auto;
  max-width: 100%;
	@media screen and (max-width: 768px) {
		width: 100%;
		height: auto;
		margin-top: 12px;
	}
}
.p-about-section-voice > .p-about-heading {
	@media screen and (max-width: 768px) {
		margin-left: 17px;
	}
}

.p-about-section-dream {
	padding: 51px 0 56px;
  @media screen and (max-width: 768px) {
    padding: 88px 0 45px;
    border-radius: 0;
  }
}
.p-about-section-dream .p-about-full-img {
	@media screen and (max-width: 768px) {
		margin-top: 0;
    padding-inline: 14px;
	}
}
.p-about-section-dream > .p-about-heading {
	@media screen and (max-width: 768px) {
		margin-left: 17px;
    top: 24px;
	}
}