/*------------------------------------
サービス概要のページ
-------------------------------------*/


/*------------------------------------
    icon + タイトル部分
-------------------------------------*/
.serviceTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 4px solid var(--darkPink);
}

.serviceTitle > i {
  display: block;
  width: 3rem;
  height: 3rem;
  margin-bottom: -4px;
  color: var(--White);
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  background: var(--darkPink);
  border: 4px solid var(--darkPink);
}

.serviceTitle > h3 { 
  line-height: 1.2;
  margin-left: 0.3em;
}

.serviceTitle + p {
  margin-top: 1rem;
  margin-left: 1rem;
}

@media screen and (max-width: 599px) {
  .serviceTitle > i {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
  }

  .serviceTitle > h3 { 
    font-size: 18px;
  }
}



/*------------------------------------
    TOP
-------------------------------------*/
#TOP {
  width: 100vw;
  padding: 16rem 0 8rem;
  background: var(--lightPink);
  box-shadow: 3px -2px 10px var(--Black);
}

#TOP .secInner {
  position: relative;
  margin: 0 auto;
  padding-left: 10%;
  width: 880px;
}

#topTitle {
  position: absolute;
  display: block;
  top: -8rem;
  left: 3%;
  width: fit-content;
  padding: 0.5em 2em;
  color: var(--White);
  white-space: nowrap;
  background: var(--darkPink);
  box-shadow: 3px 3px 10px var(--Black);
  transform-origin: right center;
  transform: rotate(-12deg);
  z-index: 5;
}

#topText {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  padding: 0 2em 0 1em;
  margin: 0 auto;
  font-size: 40px;
}

#topText::before {
  content: "";
  position: absolute;
  display: block;
  width: 95%;
  border-right: 1.2em solid transparent;
  border-bottom: 7.2em solid var(--Pink);
  border-left: 0.8em solid transparent;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: 0;
}

#topText p {
  color: var(--White);
  font-weight: bold;
  z-index: 1;
}

#topImage {
  position: absolute;
  right: 0%;
  bottom: -8rem;
  width: 160px;
}

#forSPimg {
	display: none;
}


@media screen and (max-width: 1024px) {
  #TOP .secInner {
    width: 600px;
  }

  #topTitle {
    padding: 0.3em 1.5em;
  }

}

@media screen and (max-width: 799px) {
  #TOP .secInner {
    width: fit-content;
    padding-left: unset;
  }

  #topTitle {
    top: -7rem;
    left: -22%;
  }
  
  #topTitle h1 {
    font-size: 26px;
  }

  #topText {
    font-size: 24px;
  }

  #topImage {
    width: 120px;
    right: -20%;
  }
}


@media screen and (max-width: 599px) {
	#TOP {
		  padding: 8em 0 0;
	}

	#TOP .secInner {
    width: 100%;
  }
	
	#TOP .secInner > div:not(#forSPimg) {
		display: none;
	}

	#forSPimg {
		display: block;
	}
	
		#forSPimg img {
			height: auto;
			
	}
}




/*------------------------------------
    ABOUT
-------------------------------------*/
#resource {
  max-width: 1080px;
  margin: 2rem auto 0;
}

#resourceTitle { 
  position: relative;
  width: calc(95% - 2rem * 2);
  max-width: 720px;
  padding: 1rem 2rem;
  margin: 0 auto;
  color: var(--White);
  text-align: center;
  background: var(--Pink);
  border-radius: 9999px;
  z-index: 1;
}

#resourceTitle h6 {
  font-weight: 400;
}

#resourceTitle h6 span.bolder {
  font-weight: bolder;
  font-size: 1.2em;
}

ul#resourceField {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin: -2.5rem auto 0;
  padding: 5rem 2rem 2rem;
  background: var(--lightPink);
  border: 3px solid var(--Pink);
  border-radius: 1rem;
  z-index: 0;
}

li.resourceBox {
  width: calc((100% - 1rem * 3) / 4 - (1rem + 2px ) * 2);
  padding: 1rem;
  border: 2px solid var(--Gray);
  border-radius: 1rem;
  background: var(--White);
}
li.resourceBox:nth-of-type(n + 5) {
  margin-top: 1rem;
}
li.resourceBox:not(:nth-of-type(4n + 1)) {
  margin-left: 1rem;
}

li.resourceBox .resourceText {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

li.resourceBox .resourceText .resourceImg {
  width: 50%;
  height: fit-content;
  opacity: 0.4;
}

li.resourceBox .resourceText .resourceImg img {
	height: auto;
  object-fit: contain;
}

li.resourceBox .resourceText > p {
  position: absolute;
  right: 0;
  width: fit-content;
  font-size: 14px;
  white-space: nowrap;
}

li.resourceBox p.problemOrange {
  margin-top: 0.3rem;
  color: var(--Orange);
  font-size: calc(1em + 4px);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}


@media screen and (max-width: 1024px) {
  li.resourceBox {
    width: calc((100% - 1rem * 2) / 3 - (1rem + 2px ) * 2);
  }
  li.resourceBox:nth-of-type(n + 5) {
    margin-top: 0rem;
  }
  li.resourceBox:nth-of-type(n + 4) {
    margin-top: 1rem;
  }
  li.resourceBox:not(:nth-of-type(4n + 1)) {
    margin-left: 0rem;
  }
  li.resourceBox:not(:nth-of-type(3n + 1)) {
    margin-left: 1rem;
  }
}


@media screen and (max-width: 799px) {
  #resourceTitle { 
    width: 80%;
    padding: 1rem;
  }

  li.resourceBox .resourceText {
    justify-content: center;
  }

  li.resourceBox .resourceText > p {
    right: unset;
    text-align: center;
  }
}


@media screen and (max-width: 599px) {
  #resourceTitle h6 {
    font-size: 1rem;
    line-height: 1.2;
  }

  ul#resourceField {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  li.resourceBox {
    width: calc((100% - 0.5rem ) / 2 - (0.5rem + 2px ) * 2);
	  height: fit-content;
    padding: 0.5rem;
  }
  li.resourceBox:nth-of-type(n + 4) {
    margin-top: 0rem;
  }
  li.resourceBox:nth-of-type(n + 3) {
    margin-top: 0.5rem;
  }
  li.resourceBox:not(:nth-of-type(3n + 1)) {
    margin-left: 0rem;
  }
  li.resourceBox:not(:nth-of-type(odd)) {
    margin-left: 0.5rem;
  }

  li.resourceBox p.problemOrange {
    font-size: calc(1em + 2px);
  }
}




/*------------------------------------
    ABOUT
-------------------------------------*/
#Example {
  padding: 3rem 0;
  background: var(--lightPink);
}

#exampleField {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem auto 0;
}

.exampleBox {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc((100% - 1rem * 2 ) / 3);
}
.exampleBox + .exampleBox {
  margin-left: 1rem;
}

.exapmleTitle {
  padding: 8px 0;
  color: var(--White);
  text-align: center;
  white-space: nowrap;
  background: var(--Pink);
  border-radius: 1rem 1rem 0 0;
}

.exapmleTitle span {
  margin-left: 0.5rem;
  font-weight: 500;
}

.exampleContents {
  position: relative;
  padding: 1rem 1rem 2rem;
  height: 100%;
  font-size: 14px;
  border: 2px solid var(--Pink);
  border-radius: 0 0 1rem 1rem;
  background: var(--White);
}

.exampleContents ul li {
  position: relative;
  padding-left: 1rem;
}

.exampleContents ul li:last-of-type {
  padding-right: 6rem;
}

.exampleContents ul li::before {
  content: "";
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  top: calc(1em - 4px);
  left: calc(0.5rem - 4px);
  background: var(--darkGray);
  border-radius: 50%;
}

.exampleImg {
  position: absolute;
  right: 3rem;
  bottom: -2.3rem;
  width: 30vw;
  max-width: 160px;
  height: 30vw;
  max-height: 120px;
  transform: translateX(60%);
  z-index: 2;
}

.exampleImg img {
  object-fit: contain;
}

@media screen and (max-width: 799px) {
  #exampleField {
    flex-direction: column;
    width: 90%;
  }

  .exampleBox {
    width: 100%;
  }
  .exampleBox + .exampleBox {
    margin-top: 1rem;
    margin-left: 0;
  }

  .exampleContents {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 1rem;
  }

  .exampleContents ul li:last-of-type {
    padding-right: 0;
  }

  .exampleImg {
    position: relative;
    right: unset;
    bottom: unset;
    width: 50vw;
    height: 50vw;
    transform: unset;
  }
}


@media screen and (max-width: 599px) {
  .exampleContents {
    flex-direction: column;
    justify-content: space-between;
  }

  .exampleContents ul {
    width: 100%;
  }

  .exampleImg {
    margin-top: 1rem;
  }
}




/*------------------------------------
    FLOW
-------------------------------------*/
#FLOW .secInner {
  width: 95%;
}

#flowTitle {
  padding: 1.5rem 0;
  background: var(--darkPink);
  color: var(--White);
  text-align: center;
  border-radius: 1rem 1rem 0 0;
}

#stepField {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-top: 3rem;
}

.stepBox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((100% - 6px * 5)/ 4 - 1rem * 2);
  padding: 2.5rem 1rem 1rem;
  background: var(--lightPink);
  border: 6px solid var(--Pink);
  border-radius: 11px;
}

.stepBox + .stepBox {
  margin-left: -6px;
}

li.stepBox + li.stepBox::before {
  content: "\f04b";
  position: absolute;
  top: calc((100% - 2rem) / 2);
  left: -1rem;
  color: var(--Orange);
  font-size: 2rem;
  line-height: 1;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.stepNum {
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  width: 3.5rem;
  height: 5rem;
  color: var(--White);
  font-family: var(--PH);
  text-align: center;
}

.stepNum small, 
.stepNum p {
  position: relative;
  z-index: 1;
}

.stepNum p {
  font-size: 2rem;
  line-height: 0.7;
}

.stepNum img {
  position: absolute;
  top: -1rem;
  left: 0;
  object-fit: contain;
  z-index: 0;
}

.stepImage {
  width: 15vw;
  max-width: 160px;
  height: 15vw;
  max-height: 160px;
}

.stepImage img {
  object-position: center 75%;
  object-fit: contain;
}

.stepText {
  margin-top: 2rem;
}

.stepText h5 {
  width: 100%;
  padding-bottom: 0.5rem;
  color: var(--darkPink);
  text-align: center;
  border-bottom: 2px solid var(--Pink);
}

.stepText p {
  margin-top: 0.5rem;
  font-size: calc(1rem - 2px);
}


@media screen and (max-width: 599px) {
  #stepField {
    flex-direction: column;
    width: 95%;
    margin-right: auto;
    margin-left: auto;
  }

  .stepBox {
    width: calc(100% - 6px * 2 - 1rem * 2);
    padding-top: 1.5rem;
  }

  .stepBox + .stepBox {
    margin-left: unset;
    margin-top: 2rem;
  }
  
  li.stepBox + li.stepBox::before {
    top: -2.45rem;
    left: calc((100% - 2rem) / 2);
    transform: rotate(-30deg);
  }

  .stepImage {
    width: 50vw;
    height: 50vw;
  }

  .stepImage img {
    object-position: center;
  }
}




/*------------------------------------
    PLAN
-------------------------------------*/
#PLAN {
  padding: 3rem 0 4rem;
  background: var(--lightPink);
}

#planField {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 95%;
  margin: 3rem auto 0;
}

.planBox {
  width: calc((100% - 3% * 3) / 4 - 2px * 2);
  padding: 1.2rem 0;
  text-align: center;
  line-height: 1.2;
  background: var(--White);
  border: 2px solid var(--Gray);
  border-radius: 1rem;
}

.planBox + .planBox {
  margin-left: 3%;
}

.planBox p.planName {
  color: var(--Orange);
  font-size: 1.2rem;
  font-weight: 500;
}

.planBox p.planPrice {
  margin-top: 6px;
  color: var(--darkGray);
  font-size: 1.5rem;
  font-weight: 600;
}

.planBox p.planPrice + small {
  margin-top: 4px;
}

@media screen and (max-width: 799px) {
  #planField {
    flex-wrap: wrap;
  }

  .planBox {
    width: calc((100% - 1rem) / 2 - 2px * 2);
  }
  .planBox + .planBox {
    margin-left: unset;
  }
  .planBox:nth-of-type(even) {
    margin-left: 1rem;
  }
  .planBox:nth-of-type(n+3) {
    margin-top: 1rem;
  }
}