main {
  overflow: hidden;
}

#fvContainer {
  width: 90%;
  margin: 250px auto 0;
  text-align: center;
}

#fvContainer h1 {
  width: 810px;
  margin: 0 auto;
}

.fvText {
  margin-top: 90px;
}

.fvText h3 {
  width: 791px;
  margin: 0 auto;
}

.fvText p {
  margin-top: 30px;
  line-height: 2.2;
}






#chapter1Container {
  width: 90%;
  margin: 150px auto 0;
  text-align: center;
}

.chapter1Title {
  width: 664px;
  margin: 0 auto;
}

.chapter1Text {
  position: relative;
}

.chapter1SubTitle {
  width: 391px;
  margin: 55px auto 0;
}

.contentsTitle {
  margin-top: 36px;
  font-size: 20px;
  font-weight: bold;
}

.contentsText {
  margin-top: 25px;
  line-height: 2.2;
}

.speechBubbleContainer {
  width: 100%;
  max-width: 1440px;
  min-width: 1060px;
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}

.speechBubbleLeft {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
}

.speechBubble1 {
  width: 226px;
}

.speechBubble3 {
  width: 230px;
  margin: -7px 0 0 90px;
}

.speechBubble5 {
  width: 280px;
  margin-top: 70px;
}

.speechBubbleRight {
  display: flex;
  flex-direction: column;
}

.speechBubble2 {
  width: 267px;
}

.speechBubble4 {
  width: 218px;
  margin: 50px 0 0 auto;
}

.speechBubble6 {
  width: 239px;
  margin: 30px auto 0 0;
}

.chapter1Img {
  max-width: 480px;
  margin: 60px auto 0;
}

.chapter1Heart {
  margin-top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px 0;
}

.chapter1Heart1 {
  width: 120px;
}

.chapter1Heart2 {
  width: 144px;
}

.chapter1Heart3 {
  width: 240px;
}







#chapter2Container {
  margin-top: 130px;
  padding: 130px 0 180px;
  background: #F2F2F2;
}

.chapter2Contents {
  width: 90%;
  max-width: 1486px;
  margin: 0 auto;
  transform: translateX(23px);
}

.chapter2Title {
  width: 758px;
}

.chapter2Text {
  margin-top: 50px;
}

.chapter2SubTitle {
  width: 398px;
}

.chapter2ImgContainer {
  width: 1200px;
  height: 1052px;
  margin: -300px 0 0 clamp(130px, 14.9vw, 286px);
  position: relative;
}

.chapter2Img1 {
  width: 240px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chapter2Img2 {
  width: 549px;
  position: absolute;
  top: 5px;
  left: 115px;
}

.chapter2Img3 {
  width: 289.5px;
  position: absolute;
  top: 0;
  right: 250px;
}

.chapter2Img4 {
  width: 463px;
  position: absolute;
  top: 290px;
  right: 0;
}

.chapter2Img5 {
  width: 467.25px;
  position: absolute;
  left: calc(50% - 250px);
  bottom: 0;
}

.chapter2Img6 {
  width: 463.5px;
  position: absolute;
  left: 0;
  bottom: 140px;
}






#chapter3Container {
  width: 90%;
  max-width: 1520px;
  margin: 130px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 64px 0;
}

.chapter3Img {
  flex: 0 1 728px;
}

.chapter3Text {
  flex: 0 1 728px;
  text-align: center;
}

.chapter3SubTitle {
  width: 373px;
  margin: 50px auto 0;
}






#chapter4Container {
  margin-top: 130px;
  padding: 130px 0 0;
  background: var(--fontColor);
  text-align: center;
  color: #fff;
}

.chapter4Contents {
  width: 90%;
  margin: 0 auto;
}

.chapter4Title {
  width: 831px;
  margin: 0 auto;
}

.chapter4SubTitle {
  width: 373px;
  margin: 50px auto 0;
}

.chapter4Img1 {
  max-width: 1114px;
  margin: 0 auto;
}

.chapter4Img2 {
  margin-top: 220px;
  display: flex;
}






#bigdayContainer {
  width: 90%;
  margin: 180px auto 0;
  text-align: center;
}

.bigdayArrow {
  width: 83px;
  margin: 0 auto;
}

.bigDayHeartContainer {
  max-width: 1182px;
  margin: 100px auto 0;
  display: flex;
  align-items: center;
  gap: 0 61px;
}

.bigdayText {
  margin-top: 60px;
}

.bigdayTitle {
  width: 569px;
  margin: 0 auto;
}

#bigdayContainer .contentsTitle {
  margin-top: 56px;
}






#storyContainer {
  padding: 130px 0 120px;
  background: #F2F2F2;
}

#commonPartsContainer {
  margin-top: 0;
}











@media (max-width: 1024px) {
#fvContainer {
  /* width: 90%; */
  margin: 230px auto 0;
  /* text-align: center; */
}

h1 {
  /* width: 100%; */
  max-width: calc(692px * 0.6);
  /* margin: 0 auto; */
}

.fvText {
  margin-top: 70px;
}

.fvText h3 {
  width: calc(629px * 0.7);
  /* margin: 0 auto; */
}

.fvText p {
  margin-top: 25px;
  /* line-height: 2.2; */
}






#chapter1Container {
  /* width: 90%; */
  margin: 130px auto 0;
  /* text-align: center; */
}

.chapter1Text {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chapter1Title {
  width: calc(664px * 0.7);
  margin: 60px auto 0;
}

.chapter1SubTitle {
  width: calc(391px * 0.7);
  margin: 45px auto 0;
}

.contentsTitle {
  margin-top: 30px;
  /* font-size: 20px;
  font-weight: bold; */
}

.contentsText {
  margin-top: 20px;
  /* line-height: 2.2; */
}

.speechBubbleContainer {
  order: -1;
  /* width: 100%;
  max-width: 1440px;
  min-width: 1060px; */
  position: static;
  /* top: 200px;
  left: 50%; */
  transform: translateX(0);
  /* display: flex; */
  justify-content: center;
}

.speechBubbleLeft {
  /* margin-top: 28px;
  display: flex;
  flex-direction: column; */
  display: none;
}

/* .speechBubble1 {
  width: 226px;
}

.speechBubble3 {
  width: 230px;
  margin: -7px 0 0 90px;
}

.speechBubble5 {
  width: 280px;
  margin-top: 70px;
} */

/* .speechBubbleRight {
  display: flex;
  flex-direction: column;
} */

.speechBubble2 {
  /* width: 267px; */
  margin: 0 0 0 220px;
}

.speechBubble4 {
  /* width: 218px; */
  margin: -80px auto 0 0;
}

.speechBubble6 {
  /* width: 239px; */
  margin: -36px 0 0 180px;
}

.chapter1Img {
  /* max-width: 480px; */
  margin: 40px auto 0;
}

.chapter1Heart {
  margin-top: 90px;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  gap: 80px 0;
}

.chapter1Heart1 {
  width: calc(120px * 0.8);
}

.chapter1Heart2 {
  width: calc(144px * 0.8);
}

.chapter1Heart3 {
  width: calc(240px * 0.8);
}







#chapter2Container {
  margin-top: 110px;
  padding: 110px 0 110px;
  /* background: #F2F2F2; */
}

.chapter2Contents {
  /* width: 90%;
  max-width: 1486px;
  margin: 0 auto; */
  transform: translateX(0);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chapter2Title {
  width: calc(758px * 0.7);
  margin: 0 auto;
}

.chapter2Title img {
  width: 100%;
}

.chapter2Text {
  margin-top: 45px;
  text-align: center;
}

.chapter2SubTitle {
  width: calc(398px * 0.7);
  margin: 0 auto;
}

.chapter2ImgContainer {
  width: 552px;
  height: 483.92px;
  margin: 50px auto 0;
  position: relative;
  /* transform: scale(0.46);
  transform-origin: top left; */
}

.chapter2Img1 {
  width: 110.4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chapter2Img2 {
  width: 252.54px;
  /* position: absolute; */
  top: 2.355px;
  left: 52.9px;
}

.chapter2Img3 {
  width: 133.17px;
  /* position: absolute;
  top: 0; */
  right: 115px;
}

.chapter2Img4 {
  width: 212.98px;
  /* position: absolute; */
  top: 133.4px;
  /* right: 0; */
}

.chapter2Img5 {
  width: 214.94px;
  /* position: absolute; */
  left: calc(50% - 115px);
  /* bottom: 0; */
}

.chapter2Img6 {
  width: 213.21px;
  /* position: absolute;
  left: 0; */
  bottom: 64.4px;
}






#chapter3Container {
  /* width: 90%;
  max-width: 1520px; */
  margin: 110px auto 0;
  /* display: flex; */
  justify-content: flex-start;
  align-items: center;
  flex-direction: column-reverse;
  gap: 0;
}

.chapter3Img {
  flex: 0 1 auto;
  max-width: 509.6px;
}

.chapter3Text {
  flex: 0 1 auto;
  /* text-align: center; */
}

.chapter3Title {
  width: calc(389px * 0.7);
  margin: 0 auto;
}

.chapter3SubTitle {
  width: calc(373px * 0.7);
  margin: 45px auto 0;
}

.chapter3SubTitle {
  margin-top: 45px;
}






#chapter4Container {
  margin-top: 90px;
  padding: 110px 0 0;
  /* background: var(--fontColor);
  text-align: center;
  color: #fff; */
}

/* .chapter4Contents {
  width: 90%;
  margin: 0 auto;
} */

.chapter4Title {
  width: calc(831px * 0.62);
  margin: 0 auto;
}

.chapter4SubTitle {
  width: calc(373px * 0.7);
  margin: 45px auto 0;
}

/* .chapter4Img1 {
  max-width: 1114px;
  margin: 0 auto;
} */

.chapter4Img2 {
  margin-top: 150px;
  /* display: flex; */
}






#bigdayContainer {
  /* width: 90%; */
  margin: 150px auto 0;
  /* text-align: center; */
}

.bigdayArrow {
  width: 60px;
  /* margin: 0 auto; */
}

.bigDayHeartContainer {
  width: 80%;
  /* max-width: 1182px; */
  margin: 80px auto 0;
  /* display: flex;
  align-items: center; */
  gap: 0 50px;
}

.bigdayText {
  margin-top: 50px;
}

.bigdayTitle {
  width: calc(569px * 0.7);
  /* margin: 0 auto; */
}

#bigdayContainer .contentsTitle {
  margin-top: 45px;
}






#storyContainer {
  padding: 110px 0 80px;
  /* background: #F2F2F2; */
}

/* #commonPartsContainer {
  margin-top: 0;
} */
}









@media (max-width: 560px) {
body {
  font-size: 14px;
}
#fvContainer {
  /* width: 90%; */
  margin: 200px auto 0;
  /* text-align: center; */
}

h1 {
  /* width: 100%; */
  max-width: 277px;
  /* margin: 0 auto; */
}

.fvText {
  margin-top: 55px;
}

.fvText h3 {
  width: 315px;
  /* margin: 0 auto; */
}

.fvText p {
  margin-top: 30px;
  /* line-height: 2.2; */
}






#chapter1Container {
  /* width: 90%; */
  margin: 100px auto 0;
  /* text-align: center; */
}

/* .chapter1Text { */
  /* position: relative; */
  /* display: flex;
  flex-direction: column;
  align-items: center;
} */

.chapter1Title {
  width: 277px;
  margin: 50px auto 0;
}

.chapter1SubTitle {
  width: 196px;
  margin: 40px auto 0;
}

.contentsTitle {
  margin-top: 30px;
  /* font-size: 20px;
  font-weight: bold; */
}

.contentsText {
  margin-top: 20px;
  /* line-height: 2.2; */
}

.speechBubbleContainer {
  order: -1;
  /* width: 100%;
  max-width: 1440px;
  min-width: 1060px; */
  position: static;
  /* top: 200px;
  left: 50%; */
  transform: translateX(0);
  /* display: flex; */
  justify-content: center;
}

.speechBubbleLeft {
  /* margin-top: 28px;
  display: flex;
  flex-direction: column; */
  display: none;
}

/* .speechBubble1 {
  width: 226px;
}

.speechBubble3 {
  width: 230px;
  margin: -7px 0 0 90px;
}

.speechBubble5 {
  width: 280px;
  margin-top: 70px;
} */

/* .speechBubbleRight {
  display: flex;
  flex-direction: column;
} */

.speechBubble2 {
  width: 140.88px;
  margin: 0 0 0 118px;
}

.speechBubble4 {
  width: 119.03px;
  margin: -44px auto 0 0;
}

.speechBubble6 {
  width: 121.7px;
  margin: -20px 0 0 100px;
}

.chapter1Img {
  /* max-width: 480px; */
  margin: 40px auto 0;
}

.chapter1Heart {
  margin-top: 90px;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  gap: 65px 0;
}

.chapter1Heart1 {
  width: 72px;
}

.chapter1Heart2 {
  width: 90px;
}

.chapter1Heart3 {
  width: 120px;
}







#chapter2Container {
  margin-top: 90px;
  padding: 90px 0 70px;
  /* background: #F2F2F2; */
}

/* .chapter2Contents { */
  /* width: 90%;
  max-width: 1486px;
  margin: 0 auto; */
  /* transform: translateX(0);
  display: flex;
  flex-direction: column;
  align-items: center;
} */

.chapter2Title {
  width: 316px;
  /* margin: 0 auto; */
}

/* .chapter2Title img {
  width: 100%;
} */

.chapter2Text {
  margin-top: 40px;
  /* text-align: center; */
}

.chapter2SubTitle {
  width: 186px;
  /* margin: 0 auto; */
}

.chapter2ImgContainer {
  width: 353px;
  height: 314.39px;
  margin: 60px auto 0;
  /* position: relative; */
  transform: translateX(-5px);
}

.chapter2Img1 {
  width: 96px;
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}

.chapter2Img2 {
  width: 150px;
  /* position: absolute; */
  top: 4px;
  left: 18px;
}

.chapter2Img3 {
  width: 110px;
  /* position: absolute; */
  top: -3px;
  right: 60px;
}

.chapter2Img4 {
  width: 114px;
  /* position: absolute; */
  top: 105px;
  right: 3px;
}

.chapter2Img5 {
  width: 140px;
  /* position: absolute; */
  left: calc(50% - 66px);
  bottom: -2px;
}

.chapter2Img6 {
  width: 132px;
  /* position: absolute; */
  left: -5px;
  bottom: 40px;
}






#chapter3Container {
  /* width: 90%;
  max-width: 1520px; */
  margin: 100px auto 0;
  /* display: flex; */
  /* justify-content: flex-start;
  align-items: center;
  flex-direction: column-reverse;
  gap: 0; */
}

/* .chapter3Img {
  flex: 0 1 auto;
  max-width: 509.6px;
} */

/* .chapter3Text {
  flex: 0 1 auto; */
  /* text-align: center; */
/* } */

.chapter3Title {
  width: 163px;
  /* margin: 0 auto; */
}

.chapter3SubTitle {
  width: 226px;
  margin: 40px auto 0;
}






#chapter4Container {
  margin-top: 80px;
  padding: 100px 0 0;
  /* background: var(--fontColor);
  text-align: center;
  color: #fff; */
}

/* .chapter4Contents {
  width: 90%;
  margin: 0 auto;
} */

.chapter4Title {
  width: 346px;
  /* margin: 0 auto; */
}

.chapter4SubTitle {
  width: 187px;
  margin: 40px auto 0;
}

.chapter4Img1 {
  /* max-width: 1114px; */
  margin: 40px auto 0;
}

.chapter4Img2 {
  margin-top: 90px;
  flex-direction: column;
  /* display: flex; */
}






#bigdayContainer {
  /* width: 90%; */
  margin: 90px auto 0;
  /* text-align: center; */
}

.bigdayArrow {
  width: 48px;
  /* margin: 0 auto; */
}

.bigDayHeartContainer {
  width: 100%;
  /* max-width: 1182px; */
  margin: 60px auto 0;
  /* display: flex; */
  align-items: flex-start;
  gap: 0;
}

.bigDayHeart1 {
  width: 121px;
  margin-top: 6px;
}

.bigDayHeart2 {
  width: 140px;
  margin-top: 40px;
}

.bigDayHeart3 {
  width: 115px;
}

.bigdayText {
  margin-top: 40px;
}

.bigdayTitle {
  width: 240px;
  /* margin: 0 auto; */
}

#bigdayContainer .contentsTitle {
  margin-top: 40px;
}






#storyContainer {
  padding: 90px 0 60px;
  /* background: #F2F2F2; */
}

/* #commonPartsContainer {
  margin-top: 0;
} */
}