/* =========================================================================================================
 　　base
========================================================================================================= */

/* =====================
  main
===================== */

/*-- common --*/
#breadcrumb {
  margin-bottom: 90px;
}

.section {
  margin-bottom: 90px;
}

.section-inner {
  position: relative;
  z-index: 1;
}

h2 > .title-main {
  display: block;
  font-weight: 400;
  font-size: 2.8rem;
  color: #184aa1;
  margin-bottom: 15px;
}

h2 > .title-sub {
  display: block;
  font-size: 2.4rem;
  color: #333;
  margin-bottom: 20px;
}

p.text {
  position: relative;
  z-index: 1;
  line-height: 2;
  text-align: justify;
  background: #fff;
  margin-bottom: 30px;
}

.blocks:first-child {
  margin-bottom: 40px;
}

.blocks:nth-child(2) .image {
  margin-bottom: 30px;
}

.image-pattern-a {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.area {
  position: relative;
}

.area::before {
  content: "";
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 72px;
  line-height: 1;
  color: #184aa1;
  opacity: 0.1;
  white-space: nowrap;
}

/*-- area-primary --*/
.area-primary::before {
  position: absolute;
  top: -3.3%;
  left: 1%;
  content: "CHAPTER:00";
}

/*-- area-secondary --*/
.area-secondary::before {
  position: absolute;
  top: -2%;
  left: 1%;
  content: "CHAPTER:01";
}

/*-- area-tertiary --*/
.area-tertiary::before {
  position: absolute;
  top: -1.8%;
  left: 1%;
  content: "CHAPTER:02";
}

/*-- area-quaternary --*/
.area-quaternary::before {
  position: absolute;
  top: -3%;
  left: 1%;
  content: "CHAPTER:03";
}

/*-- area-quinary --*/
.area-quinary::before {
  position: absolute;
  top: -2.5%;
  left: 1%;
  content: "CHAPTER:04";
}

/*-- area-senary --*/
.area-senary::before {
  position: absolute;
  top: -3.5%;
  left: 1%;
  content: "CHAPTER:05";
}

@media screen and (max-width: 767px) {}



/* ====================================================================================
		tablet
==================================================================================== */
@media screen and (min-width: 768px) {

  #breadcrumb {
    margin-bottom: 120px;
  }

  .section {
    margin-bottom: 180px;
  }

  .area::before {
    font-size: 152px;
  }

  .area-primary::before {
    top: -7%;
  }

  .area-secondary::before {
    top: -5%;
  }

  .area-tertiary::before {
    top: -4%;
  }

  .area-quaternary::before {
    top: -8%;
  }

  .area-quinary::before {
    top: -7%;
  }

  .area-senary::before {
    top: -8%;
  }

}



/* ====================================================================================
		PC
==================================================================================== */

@media screen and (min-width: 1024px) {

  #breadcrumb {
    margin-bottom: 220px;
  }

  h2 > .title-main {
    font-size: 40px;
    margin-bottom: 30px;
  }

  h2 > .title-sub {
    font-size: 32px;
    margin-bottom: 50px;
  }

  p.text {
    margin-bottom: 60px;
  }

  .blocks:first-child {
    margin-bottom: 80px;
  }

  .blocks:nth-child(2) .image {
    margin-bottom: 60px;
  }

}

@media screen and (min-width: 1024px) {

  .flx-pc-1300 {
    display: flex;
  }

  .flx-center-pc-1300 {
    display: flex;
    align-items: center;
  }

  p.text {
    margin-bottom: 0;
  }

  .blocks:nth-child(2) .image {
    margin-bottom: 0;
  }

  .block-row,
  .block-row-reverse {
    position: relative;
  }

  .block-row-reverse {
    flex-direction: row-reverse;
  }

  .block-row > .image,
  .block-row-reverse > .image {
    position: absolute;
  }

  .block-row > p.text {
    max-width: 68%;
    padding: 40px 40px 40px 0;
  }

  .block-row-reverse > p.text {
    max-width: 68%;
    padding: 40px 0 40px 40px;
  }

  .area::before {
    font-size: 152px;
  }

  .area-secondary::before,
  .area-quaternary::before,
  .area-senary::before {
    left: auto;
    right: 1%;
  }

  .area-primary::before {
    top: -12%;
  }

  .area-secondary::before {
    top: -6%;
  }

  .area-tertiary::before {
    top: -6%;
  }

  .area-quaternary::before {
    top: -8%;
  }

  .area-quinary::before {
    top: -7%;
  }

  .area-senary::before {
    top: -10%;
  }

  .area-secondary .blocks:first-child {
    margin-bottom: 140px;
  }

  .area-tertiary .blocks:first-child {
    margin-bottom: 190px;
  }

  .area-quinary .block:first-child p.text {
    margin-bottom: 60px;
  }

  .image1,
  .image2,
  .image4,
  .image8 {
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0%;
  }

  .image3,
  .image5 {
    top: -10%;
    left: -6%;
  }

  .image6 {
    top: -10%;
    right: -12%;
  }

}