@charset "UTF-8";

/* =============================================================

page-about__content  common parts

===============================================================*/
.page-about__content {
  margin-bottom: 110px;
}

.page-about__content:last-of-type {
  margin-bottom: 0;
}

.page-about__content .page__sec_ttl {
  margin-bottom: 40px;
}

.page-about__content .top {
  margin-bottom: 70px;
}

.txt {
  font-size  : clamp(1.2rem, 0.98rem + 0.6vw, 2rem);
  line-height: 1.9;
}

.txt_span {
  display   : block;
  margin-top: 20px;
}

/* --------------------------------------------------------------

レスポンシブ

----------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .page-about__content {
    margin-bottom: 50px;
  }

  .page__main.page-about {
    padding: 52px 0 60px;
  }

  .page-about__content .page__sec_ttl {
    line-height  : 1.25;
    margin-bottom: 20px;
  }

  .page-about__content .page__sec_ttl::before {
    height: 65%;
  }

  .txt {
    line-height: 1.66;
  }
}

/* =============================================================

page-about__content page-about01

===============================================================*/
.page-about__content .top dl {
  width    : 100%;
  display  : flex;
  flex-wrap: wrap;
}

.page-about__content .top dl.step1 {
  margin: 40px 0 20px;
}

.page-about__content .top dl.step2 {
  margin-bottom: 45px;
}

.page-about__content .top dl dt {
  width          : 22%;
  max-width      : 200px;
  font-size      : clamp(1.4rem, 1.098rem + 0.8vw, 2.5rem);
  font-size      : clamp(1.3rem, 0.97rem + 0.8vw, 2.5rem);
  font-weight    : 500;
  color          : #fff;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : #DE9A00;
  position       : relative;
}

.page-about__content .top dl.step1 dt {
  height: 80px;
}

.page-about__content .top dl.step2 dt {
  height: 100px;
}

.page-about__content .top dl dt::after {
  position    : absolute;
  top         : 50%;
  right       : -20px;
  width       : 0;
  height      : 0;
  content     : '';
  border-width: 15px 12.5px 0 12.5px;
  border-style: solid;
  border-color: #DE9A00 transparent transparent transparent;
  transform   : translate(0, -50%) rotate(-90deg);
}

.page-about__content .top dl dd {
  /* width: calc(100% - 200px); */
  width         : 78%;
  font-size     : clamp(1.3rem, 1.025rem + 0.8vw, 2.3rem);
  font-weight   : 500;
  line-height   : 1.5;
  vertical-align: middle;
  background    : #F4F4F4;
  padding       : 0 35px;
  display       : flex;
  align-items   : center;
}

.page-about__content .bottom .ttl {
  font-size    : clamp(1.4rem, 1.098rem + 1vw, 2.5rem);
  font-weight  : 500;
  margin-bottom: 30px;
}

.page-about__content .bottom .ttl::before {
  content     : "■";
  display     : inline-block;
  font-size   : clamp(1.4rem, 1.098rem + 1.17vw, 2.5rem);
  color       : #DE9A00;
  margin-right: 7px;
}

.page-about__content .bottom .note {
  font-weight: 500;
  line-height: 1.6;
  display    : block;
}

.page-about__content .bottom .note:first-of-type {
  margin-top: 30px;
}

/* --------------------------------------------------------------

レスポンシブ

----------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .page-about__content .top {
    margin-bottom: 30px;
  }

  .page-about__content .top dl.step1 {
    margin: 25px 0 10px;
  }

  .page-about__content .top dl.step2 {
    margin-bottom: 25px;
  }

  .page-about__content .top dl.step1 dt {
    height: 65px;
  }

  .page-about__content .top dl.step2 dt {
    height: 75px;
  }

  .page-about__content .top dl dt::after {
    right       : -12px;
    border-width: 8px 8px 0 8px;
  }

  .page-about__content .top dl dd {
    padding: 0 10px 0 17px;
  }

  .page-about__content .bottom .ttl {
    margin-bottom: 15px;
  }

  .page-about__content .bottom .note:first-of-type {
    margin-top: 15px;
  }
}


/* =============================================================

page-about__content page-about02

===============================================================*/
.page-about__content .item {
  margin-top: 50px;
}

.page-about__content .item .ttl_wrap {
  display      : flex;
  align-items  : center;
  margin-bottom: 30px;
}

.page-about__content .item .ttl_wrap img {
  width       : 18%;
  max-width   : 150px;
  min-width   : 80px;
  margin-right: 25px;
}

.page-about__content .item .ttl {
  font-size  : clamp(1.7rem, 1.398rem + 0.7vw, 2.8rem);
  font-weight: 500;
  line-height: 1.5;
}

.page-about__content .item .box {
  padding      : 40px 3% 40px 50px;
  border       : 3px solid #B9D2E0;
  border-radius: 10px;
  margin-bottom: 30px;
}

.page-about__content .item .box .inner {
  display        : flex;
  justify-content: space-between;
  align-items    : flex-end;
}

.page-about__content .item .box .box_ttl {
  font-size    : clamp(1.4rem, 1.098rem + 0.8vw, 2.5rem);
  font-weight  : 500;
  color        : #156795;
  margin-bottom: 30px;
}

.page-about__content .item .box ul {
  width: 64%;
}

.page-about__content .item .box ul li {
  line-height  : 1.6;
  margin-bottom: 15px;
  display      : flex;
}

.page-about__content .item .box ul li::before {
  content  : "●";
  display  : inline-block;
  color    : #DE9A00;
  font-size: 1.2rem;
  /* margin: 7px 10px 0 0; */
  margin   : 1% 2% 0 0;
}

.page-about__content .item .box ul li:last-child {
  margin-bottom: 0;
}

.page-about__content .item .box img {
  width    : 30%;
  min-width: 230px;
}

/* --------------------------------------------------------------

レスポンシブ

----------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .page-about__content .item {
    margin-top: 25px;
  }

  .page-about__content .item .ttl_wrap {
    margin-bottom: 15px;
  }

  .page-about__content .item .ttl_wrap img {
    margin-right: 15px;
  }

  .page-about__content .item .box {
    padding      : 25px 25px 20px 25px;
    margin-bottom: 4.5%;
  }

  .page-about__content .item .box .inner {
    flex-direction: column;
  }

  .page-about__content .item .box .box_ttl {
    margin-bottom: 12px;
  }

  .page-about__content .item .box ul {
    width: 100%;
  }

  .page-about__content .item .box ul li {
    line-height  : 1.5;
    margin-bottom: 10px;
  }

  .page-about__content .item .box ul li::before {
    font-size: 1.0rem;
    margin   : 0.677% 5px 0 0;
  }

  .page-about__content .item .box img {
    width    : 40%;
    min-width: 180px;
    margin   : 20px auto 0;
  }
}


/* =============================================================

page-about__content page-about03

===============================================================*/
.page-about__content .link {
  font-size      : clamp(1.2rem, 0.98rem + 0.85vw, 2rem);
  color          : #5FAAD9;
  line-height    : 1.9;
  text-decoration: underline;
}

.page-about__content .message_box_grey {
  background: #F4F4F4;
  padding   : 40px;
  margin    : 47px 0 78px;
}

.page-about__content .message_box_grey .ttl {
  font-size    : clamp(1.3rem, 1.025rem + 0.7vw, 2.3rem);
  font-weight  : 500;
  margin-bottom: 20px;
  line-height  : 1.4;
  display      : block;
}

.page-about__content .imgarea .ttl {
  font-size  : clamp(1.4rem, 1.098rem + 0.8vw, 2.5rem);
  font-weight: 500;
}

.page-about__content .imgarea .ttl::before {
  content     : "■";
  display     : inline-block;
  color       : #DE9A00;
  margin-right: 10px;
}

.page-about__content .imgarea figure {
  margin: 37px 0 60px;
}

/* --------------------------------------------------------------

レスポンシブ

----------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .page-about__content .message_box_grey {
    padding: 20px;
    margin : 23px 0 38px;
  }

  .page-about__content .message_box_grey .ttl {
    margin-bottom: 15px;
  }

  .page-about__content .imgarea .ttl::before {
    margin-right: 5px;
  }

  .page-about__content .imgarea figure {
    margin: 19px 0 30px;
  }
}