/*-- ========================================
â–¼å…±é€šéƒ¨åˆ†â–¼
======================================== --*/

/* --sec-tittle-font: minion-pro, serif;
--accent-font:"Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "MS PMincho", serif;
--brandName-font: "ãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ Pro", "Hiragino Mincho Pro", "MS Pæ˜Žæœ", "MS PMincho", serif;
--subtext-font: */

/* â–¼fontâ–¼ */
@media only screen and (max-width: 767px) {
#contents {
      padding: 0 0 calc(110*(100vw/750));
  }
}

@media only screen and (min-width: 768px) {
  #contents {
      width: 100%;
      margin: 0 auto;
      padding: 0 0 13rem;
  }
}

.csr {
  width: 100%;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.05em;
}

.csr-headline {
  font-family: var(--sec-tittle-font);
  font-size: calc(56*(100vw/750));
  font-weight: 400;
  color: var(--sec-tittle-color);
  text-align: center;
}

.csr-headlineSubTtl {
  font-family: var(--sec-tittle-font);
  display: block;
  font-size: calc(26*(100vw/750));
  margin-top: calc(20*(100vw/750));
  text-align: center;
}

.report-headline {
  font-family: var(--accent-font);
  /* font-family: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "MS PMincho", serif; */
  font-size: calc(20 * (100vw / 375));
  line-height: 1.15;
  color: #1c1c1c;
  vertical-align: text-bottom;
}

.report-headline span {
  font-family: var(--sec-tittle-font);
  /* font-family: minion-pro, serif; */
  font-weight: 400;
  font-size: calc(13 * (100vw / 375));
  line-height: 1.77;
  text-align: left;
  color: #707070;
}

.dropdown, .dropdown-listItem {
  font-size: calc(13 * (100vw / 375));
  line-height: 1.69;
  color: #1c1c1c;
}

.report-column p, .report-column .lead-txt {
  font-size: calc(13 * (100vw / 375));
  line-height: 1.77;
  letter-spacing: 0.04em;
  color: #1c1c1c;
}


.report-column .text-container{
  position: relative;

}
.report-column .text-container .balloons  {
  position: relative;
  height: 100px;
  max-width: 500px;
  margin: 15px auto 0;

}

.report-column .text-container .balloons li {
  position: absolute;
}

.report-column .text-container .balloons li img  {
  width: 100%;
}

.report-column .text-container .balloons li.balloon1 {
  width: 140px;
  top: -264px;
  left: 0;
}

.report-column .text-container .balloons li.balloon1 img {

  z-index: -10;
  opacity: 0.3;

}



.item-container .item-description {
  font-size: calc(12 * (100vw / 375));
  line-height: 1.83;
  color: #1c1c1c;
}

.feature-container .feature-description {
  font-size: calc(16 * (100vw / 375));
  line-height: 1.44;
  color: #1c1c1c;
}

.feature-container .feature-headline {
  font-family: var(--accent-font);
  /* font-family: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "MS PMincho", serif; */
  color: #6585b2;
}

.feature-container .feature-list p {
  font-size: calc(13 * (100vw / 375));
  line-height: 2.154;
}

.feature-container p.feature-caption {
  font-size: calc(12 * (100vw / 375));
}

/* â–²fontâ–² */
/* â–¼csr-headlineâ–¼ */
.csr {
  margin: calc(38 * (100vw / 375)) auto 0;
}

/* â–²csr-headlineâ–² */
/* â–¼report-heading */
.report-heading {
  width: calc(355 * (100vw / 375));
  margin: calc(35 * (100vw / 375)) auto 0;
}

.report-headline {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
}

.report-headline span {
  margin-left: calc(12 * (100vw / 375));
}

/* pull-down */
.dropdown {
  position: relative;
  margin-top: calc(18 * (100vw / 375));
}

.dropdown, .dropdown-listItem {
  width: calc(355 * (100vw / 375));
  height: calc(45 * (100vw / 375));
  padding-left: calc(10 * (100vw / 375));
  line-height: calc(45 * (100vw / 375));
  border: solid calc(1 * (100vw / 375)) #cecece;
  background-color: #fff;
}

.dropdown .top-drop {
  position: relative;
}

.top-drop::before {
  transition: all 0.3s ease;
  content: "";
  display: block;
  width: calc(7 * (100vw / 375));
  height: calc(7 * (100vw / 375));
  position: absolute;
  top: 35%;
  transform: rotate(135deg);
  right: calc(16 * (100vw / 375));
  border-top: solid 0.1rem #575757;
  border-right: solid 0.1rem #575757;
}

.top-drop.action::before {
  top: 45%;
  transform: rotate(-45deg);
}

.dropdown-content-list {
  position: absolute;
  top: calc(42 * (100vw / 375));
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 1;
}

.dropdown-listItem {
  border-top: transparent;
}

.dropdown-listItem:nth-of-type(1) {
  border-top: solid calc(1 * (100vw / 375)) #cecece;
}

/* â–²report-headingâ–² */
/*-- ========================================
          â–²å…±é€šéƒ¨åˆ†â–²
======================================== --*/
/* â–¼report-columnâ–¼ */
.report-column {
  width: calc(355 * (100vw / 375));
  margin: calc(30 * (100vw / 375)) auto 0;
}

/* report subtitle */
.report-column .lead-title {
  display: block;
  margin-top: calc(30 * (100vw / 375));
  font-weight: bold;
  line-height: 3;
}

/* â–²report-columnâ–² */
/* â–¼item-containerâ–¼ */
.item-container {
  width: calc(355 * (100vw / 375));
  margin: calc(90 * (100vw / 375)) auto 0;
}

.item-container .item-wrapper {
  width: calc(355 * (100vw / 375));
  margin: auto;
}

.item-container .item-wrapper-add {
  padding-top: calc(135 * (100vw / 375));
}

.item-container .item-description {
  margin-top: calc(20 * (100vw / 375));
  font-size: calc(12 * (100vw / 375));
}

.report-column .lead-txt {
  margin-top: calc(30 * (100vw / 375));
}

/* â–²item-containerâ–² */
/* â–¼feature-containerâ–¼ */
.feature-container {
  width: calc(355 * (100vw / 375));
  height: auto;
  margin: calc(18 * (100vw / 375)) auto 0;
  padding: calc(41 * (100vw / 375)) calc(27 * (100vw / 375)) calc(35 * (100vw / 375));
  background-color: #f7f7f7;
}

/* feature item */
.feature-container .item-wrapper {
  width: calc(300 * (100vw / 375));
  margin: 0 auto;
}

/* feature item--description */
.feature-container .feature-description {
  width: calc(300 * (100vw / 375));
  margin: calc(20 * (100vw / 375)) auto 0;
}

.feature-container .feature-list p {
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
}

.feature-container .feature-list li span {
  margin-left: calc(10 * (100vw / 375));
}

.feature-container p.feature-caption {
  width: 100%;
  margin-top: calc(20 * (100vw / 375));
}

/* â–²feature-containerâ–² */
/*-- ========================================
â–¼å…±é€šéƒ¨åˆ†â–¼
======================================== --*/
/* â–¼btnâ–¼ */
.btn {
  text-align: center;
  margin: calc(50 * (100vw / 375)) auto 0;
}

.btn a {
  display: inline-block;
  width: calc(230 * (100vw / 375));
  height: calc(45 * (100vw / 375));
  line-height: calc(45 * (100vw / 375));
  border: solid calc(1 * (100vw / 375)) #022363;
  font-family: var(--accent-font);
  /* font-family: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "MS PMincho", serif; */
  font-size: calc(13 * (100vw / 375));
  letter-spacing: 0.05em;
  color: #022363;
}

/* â–²btnâ–² */
/*-- ========================================
          â–²å…±é€šéƒ¨åˆ†â–²
======================================== --*/
@media only screen and (min-width: 768px) {
  /*-- ========================================
â–¼å…±é€šéƒ¨åˆ†â–¼
======================================== --*/
  .breadcrumbs__inner {
      width: 120rem;
      margin: 0 auto;
      padding: 1.5rem 0;
  }

  /* â–¼fontâ–¼ */
  .csr-headline {
      font-size: 3.2rem;
  }

  .csr-headlineSubTtl {
    margin-top: 2.0rem;
      font-size: 1.3rem;
  }

  .report-headline {
      font-size: 2.0rem;
  }

  .report-headline span {
      font-size: 1.3rem;
      line-height: 1.769;
      letter-spacing: 0.05em;
  }

  .dropdown, .dropdown-listItem {
      font-size: 1.3rem;
      font-weight: normal;
  }

  .report-column p, .report-column .lead-txt {
      font-size: 1.3rem;
      line-height: 1.769;
      letter-spacing: 0.05em;
  }

  .item-container .item-description {
      font-size: 1.2rem;
  }

  .feature-container .feature-description {
      font-size: 1.6rem;
  }

  .feature-container .feature-headline {
      color: #6585b2;
  }

  .feature-container .feature-list p {
      font-size: 1.3rem;
      line-height: 2.31;
  }

  .feature-container p.feature-caption {
      font-size: 0.85rem;
  }

  /* â–²fontâ–² */
  /* â–¼csr-headlineâ–¼ */
  .csr {
      width: 100%;
      margin: 5.25rem auto 0;
  }

  /* â–²csr-headlineâ–² */
  /* â–¼report-heading */
  .report-heading {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      width: 80.0rem;
      margin: 4.65rem auto 0;
  }

  .report-headline span {
      margin-left: 1.4rem;
  }

  .dropdown {
      margin-top: auto;
  }

  .dropdown, .dropdown-listItem {
      width: 24.0rem;
      height: 4.2rem;
      line-height: 4.2rem;
      padding-left: 1.0rem;
      border: solid 0.1rem #cecece;
      background-color: #fff;
  }

  .top-drop::before {
      width: 0.5rem;
      height: 0.5rem;
      border-top: solid 0.1rem #575757;
      border-right: solid 0.1rem #575757;
      right: 1.4rem;
      top: 40%;
  }

  .top-drop.action::before {
      top: 47%;
      transform: rotate(-45deg);
  }

  .dropdown-content-list {
      top: 4rem;
      left: 50%;
      display: none;
  }

  .dropdown-listItem {
      border-top: transparent;
  }

  .dropdown-listItem:nth-of-type(1) {
      border-top: solid 0.1rem #cecece;
  }

  /* â–²report-headingâ–² */
  /*-- ========================================
          â–²å…±é€šéƒ¨åˆ†â–²
======================================== --*/
  /*-- ========================================
          â–¼ç·¨é›†ç®‡æ‰€â–¼
======================================== --*/
  /* â–¼report-columnâ–¼ */
  .report-column {
      width: 80.0rem;
      margin: 5.0rem auto 0;
  }

  /* report subtitle */
  .report-column .lead-title {
      display: block;
      margin-top: 3.0rem;
      font-size: 2.3rem;

  }

  .report-column .text-container .balloons {
      position: absolute;
      height: 100%;
      width: 600px;
      margin: 0;
      left: 0;
  }

  .report-column .text-container .balloons li.balloon1 {
      width: 190px;
      top: -208px;
      left: auto;
      left: 60px;
  }

  /* â–²report-columnâ–² */
  /* â–¼item-containerâ–¼ */
  .item-container {
      width: 80.0rem;
      margin: 4.65rem auto 0;
  }

  .item-container .item-wrapper {
      width: 64.0rem;
      margin: 0;
  }

  .item-container .item-wrapper-add {
      padding-top: 4.65rem;
  }

  .item-container .item-description {
      margin-top: 2.0rem;
  }

  .report-column .lead-txt {
      margin-top: 3.0rem;
  }



  /* â–²item-containerâ–² */
  /* â–¼feature-containerâ–¼ */
  .feature-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: 80.0rem;
      height: auto;
      margin: 5.6rem auto 0;
      padding: 4.1rem 4.0rem 3.9rem;
  }

  /* feature item */
  .feature-container .item-wrapper {
      width: 24.0rem;
      margin: 0;
  }

  /* feature item--description */
  .feature-container .feature-description {
      width: 43.8rem;
      margin: 0;
      margin-left: 3.1rem;
  }

  .feature-container .feature-list {
      margin-top: 1.5rem;
  }

  .feature-container .feature-list li span {
      margin-left: 3.2rem;
  }

  .feature-container p.feature-caption {
      margin-top: 2.0rem;
  }

  /* â–²feature-containerâ–² */
  /*-- ========================================
          â–²ç·¨é›†ç®‡æ‰€â–²
======================================== --*/
  /*-- ========================================
â–¼å…±é€šéƒ¨åˆ†â–¼
======================================== --*/
  /* â–¼btnâ–¼ */
  .btn {
      text-align: center;
      margin: 8.0rem auto 0;
  }

  .btn a {
      width: 24.0rem;
      height: 4.4rem;
      line-height: 4.4rem;
      border: solid 0.1rem #022363;
      font-size: 1.3rem;
  }

  /* â–²btnâ–² */
  /*-- ========================================
â–²å…±é€šéƒ¨åˆ†â–²
======================================== --*/
}

/*-- ========================================
animation
======================================== --*/
.btn a {
  transition: background-color 0.6s, color 0.6s;
  background-color: #fff;
}

.btn a:hover {
  background-color: #022363;
  color: #fff;
  opacity: 1;
}
