@charset "UTF-8";
/*
=====================================================================
*
*	災害支援について
*
* ===================================================================
*/
.about .plate {
  width: 1072px;
  padding: 56px 88px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 16px;
}
.about p + p {
  margin-top: 1.5em;
}
.about sup {
  vertical-align: super;
  font-size: 0.5em;
}

.about-title {
  text-align: center;
}

.about-pagenavi {
  font-size: 18px;
}
.about-pagenavi li a {
  display: block;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-weight: 700;
  background-repeat: no-repeat;
}

.about-intro {
  background-color: #fdf6f2;
}
.about-intro h2 {
  text-align: center;
}
.about-intro .about-intro__figure-01 {
  grid-area: figure;
}
.about-intro .about-intro__div-01 {
  grid-area: div1;
}
.about-intro .about-intro__div-02 {
  grid-area: div2;
  margin-top: 1.5em;
}
.about-intro .about-align__right {
  text-align: right;
}
.about-intro .about-align__right a {
  color: #1e50a2;
}
.about-intro .saigai-button {
  margin-top: 40px;
}

.about-guide {
  text-align: center;
}
.about-guide picture:hover {
  opacity: 0.85;
}

.inline-position-right:hover {
  color: #1e50a2;
  text-decoration: underline;
  opacity: 1;
}

.about-info {
  background-color: #ffffff;
  width: 1072px;
  margin: 0 auto;
  padding: 80px 0;
}
.about-info .about-choice {
  margin: 0 auto;
}
.about-info .about-choice .illustrated {
  margin-bottom: 56px;
}
.about-info .about-reason .items p {
  text-align: left;
  margin-bottom: 16px;
}
.about-info .about-reason .items p.caption {
  margin-bottom: 0;
}
.about-info .about-reason .items h3 {
  text-align: center;
  font-size: 18px;
  line-height: 1.5em;
}
.about-info .about-reason .items h3 strong {
  font-size: 32px;
  line-height: 1.5em;
}
.about-info .about-reason .items figure {
  margin: 0 auto 32px;
}
.about-info .about-video {
  margin: 0 auto;
}
.about-info .about-video h2 {
  text-align: center;
  color: #d45700;
}
.about-info .about-video .about-video__wrapper {
  position: relative;
  padding-top: 56.25%;
  margin: 0 auto 24px;
}
.about-info .about-video .about-video__wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  vertical-align: bottom;
}

.about-agency {
  background-color: #fdf6f2;
}
.about-agency .plate > div {
  margin-bottom: 56px;
}
.about-agency h2 {
  text-align: center;
}
.about-agency h3 {
  margin-bottom: 32px;
}
.about-agency h3 img {
  width: 100%;
  height: auto;
}
.about-agency .about-origin {
  text-align: center;
  padding: 22px 0 0;
}
.about-agency .about-origin .about-origin__banner img {
  margin-top: 40px;
}
.about-agency .about-origin .about-origin__p-01 {
  margin-bottom: 32px;
}
.about-agency .about-yell {
  margin: 0 auto;
  margin-bottom: 0 !important;
  padding-top: 56px;
  border-top: 1px dotted #767676;
}
.about-agency .about-yell h3 {
  margin-bottom: 32px;
}
.about-agency .about-yell p strong {
  font-size: 18px;
}

.about-share {
  display: flex;
  flex-direction: column;
}
.about-share .about-share__title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-share .about-share__title img {
  margin-right: 24px;
}
.about-share .about-share__title p em {
  background: linear-gradient(transparent 70%, #dfe6f5 0%);
  font-size: 22px;
  font-weight: 700;
}
.about-share .about-share__text {
  margin-top: 16px;
}
.about-share .about-share__buttons {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  height: 28px;
  overflow: hidden;
}
.about-share .about-share__buttons .about-share--x {
  border-radius: 4px;
  background-color: #0f1419;
  color: #ffffff;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  height: 28px;
  line-height: 28px;
  text-align: center;
  width: 80px;
  padding: 0 10px;
  margin-right: 16px;
}
.about-share .about-share__buttons .about-share--x::before {
  content: "";
  display: inline-block;
  margin: -2px 4px 0 0;
  vertical-align: middle;
  background: url("/gcf/images_cf/sns/icn_post.png") no-repeat center/13px 14px;
  height: 14px;
  line-height: 14px;
  width: 13px;
}

.about-service {
  background-color: #f3f3f3;
}
.about-service .body {
  width: 896px;
  margin: 0 auto;
}
.about-service .body h2 {
  width: 100%;
  text-align: center;
  padding-bottom: 32px;
  border-bottom: 1px solid #767676;
}

.saigai-align__center {
  text-align: center !important;
}

.saigai-button {
  background-color: #d45700;
  border-radius: 4px;
  box-sizing: border-box;
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  padding: 12px;
  width: auto;
  min-width: 244px;
  text-align: center;
}

.section-movie__group {
  max-width: 514px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-bottom: 64px;
}
.section-movie__group .movie-item {
  width: 100%;
}
.section-movie__group .movie-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 14px;
  text-align: left;
}
.section-movie__group .movie-title .movie-title__sup {
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
}
.section-movie__group .movie-thumb {
  width: 100%;
  aspect-ratio: 16/9;
}
.section-movie__group .movie-thumb iframe {
  width: 100%;
  height: 100%;
}
.section-movie__group .movie-thumb .movie-caption {
  position: relative;
  font-weight: 700;
  font-size: 16px;
  color: #1e50a2;
  margin-top: 14px;
  text-align: right;
}
.section-movie__group .movie-thumb .movie-caption::before {
  content: "＞";
  margin-right: 6px;
}
.section-movie__group .movie-thumb .movie-caption a:hover {
  text-decoration: underline;
}
@media only screen and (min-width: 835px), (min-device-width: 835px) {
  .about .illustrated {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
        grid-template-areas: "div1 figure" "div2 div2";
    justify-content: space-between;
    align-items: flex-start;
  }
  .about .illustrated figure {
    flex-shrink: 0;
    margin-left: 64px;
  }
  .about-title {
    width: 1072px;
    margin: 40px auto 16px;
  }
  .about-title img {
    width: 100%;
    height: auto;
  }
  .about-pagenavi {
    width: 896px;
    margin: 0 auto 88px;
    display: flex;
    justify-content: space-between;
  }
  .about-pagenavi li {
    width: 284px;
  }
  .about-pagenavi li a {
    position: relative;
    text-align: center;
    padding: 33px 0 73px;
    background-image: url("/assets/images/saigai/pages/about/about-caret-01-pc.png");
    background-position: bottom 17px center;
  }
  .about-intro {
    padding: 88px 0 40px;
  }
  .about-intro h2 {
    width: 796px;
    margin: 0 auto 56px;
  }
  .about-intro h2 img {
    width: 100%;
    height: auto;
  }
  .about-intro .about-intro__figure-01 {
    width: 481px;
  }
  .about-intro .about-intro__figure-01 img {
    width: 100%;
    height: auto;
  }
  .about-intro .about-intro__figure-01 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .about-intro .about-intro__div-01 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .about-intro .about-intro__div-02 {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .about-guide {
    width: 1072px;
    margin: 0 auto;
    padding-top: 80px;
  }
  .about-guide h2 {
    width: 377px;
    text-align: center;
    margin: 0 auto 32px;
  }
  .about-guide h2 img {
    width: 100%;
    height: auto;
  }
  .about-guide .about-guide__figure-01 img {
    width: 100%;
    height: auto;
  }
  .about-info .about-choice {
    width: 896px;
  }
  .about-info .about-choice h2 {
    width: 640px;
    text-align: center;
    margin: 0 auto 56px;
  }
  .about-info .about-choice h2 img {
    width: 100%;
    height: auto;
  }
  .about-info .about-choice h3 {
    margin-bottom: 32px;
  }
  .about-info .about-choice h3 img {
    width: 100%;
    height: auto;
  }
  .about-info .about-choice h3.about-choice__h3-01 {
    width: 416px;
  }
  .about-info .about-choice h3.about-choice__h3-02 {
    width: 312px;
  }
  .about-info .about-choice figure img {
    width: 100%;
    height: auto;
  }
  .about-info .about-choice figure.about-choice__figure-01 {
    width: 448px;
  }
  .about-info .about-choice figure.about-choice__figure-02 {
    width: 389px;
  }
  .about-info .about-choice figure.about-choice__figure-03 {
    width: 318px;
  }
  .about-info .about-reason {
    padding: 32px 0;
  }
  .about-info .about-reason h2 {
    text-align: center;
    margin: 0 auto 56px;
    width: 442px;
  }
  .about-info .about-reason h2 img {
    width: 100%;
    height: auto;
  }
  .about-info .about-reason .items {
    display: flex;
    justify-content: space-between;
  }
  .about-info .about-reason .items li {
    width: 331px;
  }
  .about-info .about-reason .items li .about-reason__order img {
    width: 331px;
    margin: 0 auto;
    height: auto;
  }
  .about-info .about-reason .items li figure.about-reason__figure-01 {
    width: 216px;
  }
  .about-info .about-reason .items li figure.about-reason__figure-02 {
    width: 256px;
  }
  .about-info .about-reason .items li figure.about-reason__figure-03 {
    width: 330px;
  }
  .about-info .about-reason .items li figure img {
    width: 100%;
    height: auto;
  }
  .about-info .about-reason .items h3 {
    margin: 32px 0;
  }
  .about-info .about-video {
    width: 640px;
    padding-top: 56px;
  }
  .about-info .about-video h2 {
    margin: 0 auto 32px;
    width: 517px;
    font-size: 22px;
  }
  .about-info .about-video h2 img {
    width: 100%;
    height: auto;
  }
  .about-agency {
    padding: 88px 0;
  }
  .about-agency h2 {
    margin: 0 auto 56px;
    width: 694px;
  }
  .about-agency h2 img {
    width: 100%;
    height: auto;
  }
  .about-agency h3.about-agency__h3-01 {
    width: 645px;
  }
  .about-agency h3.about-agency__h3-02 {
    width: 594px;
  }
  .about-agency h3.about-agency__h3-03 {
    width: 342px;
    margin: 0 auto 32px;
  }
  .about-agency .about-agency__figure-02 img {
    margin-top: 40px;
  }
  .about-agency .about-origin .about-origin__h3-03 {
    width: 342px;
    margin: 0 auto 16px;
  }
  .about-agency .about-origin .about-origin__h3-03 img {
    width: 100%;
    height: auto;
  }
  .about-agency .about-origin .about-origin__banner img {
    width: 100%;
    height: auto;
  }
  .about-agency .about-yell {
    width: 896px;
  }
  .about-agency .about-yell .about-yell__h3-01 {
    width: 459px;
  }
  .about-agency .about-yell .about-yell__h3-01 img {
    width: 100%;
    height: auto;
  }
  .about-agency .about-yell .about-yell__figure-01 img {
    width: 373px;
    height: auto;
  }
  .about-share {
    padding: 88px 0;
  }
  .about-share .about-share__text {
    text-align: center;
  }
  .about-service {
    text-align: center;
    padding: 88px 0 80px;
    margin-bottom: -80px;
  }
  .about-service .body > h2 {
    margin: 0 auto 32px;
  }
  .about-service .body > h2 img {
    width: 284px;
    height: auto;
  }
  .about-service .body > p {
    margin-bottom: 48px;
  }
  .about-service .body > .items {
    display: flex;
    justify-content: space-between;
    padding: 0 80px;
  }
  .about-service .body > .items li {
    width: 340px;
  }
  .about-service .body > .items li img {
    width: 100%;
    height: auto;
  }
}
@media only screen and (max-width: 834px) and (max-device-width: 834px) {
  .about .illustrated figure {
    margin-bottom: 24px;
  }
  .about .plate {
    width: 100%;
    padding: 40px 7%;
  }
  .about-title {
    width: 90%;
    margin: 24px 5% 32px;
  }
  .about-title img {
    width: 100%;
    max-width: 480px;
    height: auto;
  }
  .about-pagenavi {
    width: 100%;
    margin: 0 auto 56px;
    padding: 0 5%;
  }
  .about-pagenavi li {
    width: 100%;
    margin-bottom: 11px;
  }
  .about-pagenavi li a {
    text-align: left;
    padding: 17px 73px 17px 17px;
    background-image: url("/assets/images/saigai/pages/about/about-caret-01-sp.png");
    background-size: 40px;
    background-position: center right 17px;
  }
  .about-intro {
    width: 100%;
    padding: 56px 5%;
  }
  .about-intro h2 {
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto 40px;
  }
  .about-intro .about-intro__figure-01 {
    text-align: center;
  }
  .about-intro .about-intro__figure-01 img {
    width: 100%;
    max-width: 360px;
    height: auto;
  }
  .about-guide {
    width: 100%;
    padding: 56px 5% 0;
  }
  .about-guide h2 {
    text-align: center;
    margin: 0 auto 40px;
  }
  .about-guide h2 img {
    width: 100%;
    max-width: 480px;
    height: auto;
  }
  .about-guide .about-guide__figure-01 {
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
  }
  .about-info {
    width: 90%;
    padding: 56px 0;
    margin: 0 5%;
  }
  .about-info .about-choice h2 {
    text-align: center;
    margin: 0 auto 40px;
  }
  .about-info .about-choice h3 {
    text-align: center;
    margin-bottom: 32px;
  }
  .about-info .about-choice figure {
    text-align: center;
  }
  .about-info .about-choice figure img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .about-info .about-reason {
    padding: 8px 0 0;
  }
  .about-info .about-reason h2 {
    text-align: center;
    margin: 0 auto 40px;
  }
  .about-info .about-reason .items li {
    width: 100%;
    max-width: 480px;
    margin: 0 auto 56px;
  }
  .about-info .about-reason .items h3 {
    margin: 24px 0 32px;
  }
  .about-info .about-video {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    height: auto;
  }
  .about-info .about-video h2 {
    margin: 0 auto 24px;
    font-size: 20px;
    text-align: left;
  }
  .about-agency {
    width: 100%;
    padding: 56px 5%;
  }
  .about-agency h2 {
    margin: 0 auto 32px;
  }
  .about-agency h2 img {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  .about-agency h3 {
    text-align: center;
  }
  .about-agency h3 img {
    max-width: 360px;
  }
  .about-agency .about-agency__figure-02 img {
    margin-top: 24px;
  }
  .about-agency .about-origin .about-origin__banner img {
    width: 100%;
    height: auto;
    margin: 40px auto 0;
    max-width: 360px;
  }
  .about-agency .about-origin .about-origin__p-01 {
    margin-bottom: 16px;
  }
  .about-agency .about-yell {
    width: 100%;
  }
  .about-agency .about-yell > div {
    margin-bottom: 24px;
  }
  .about-agency .about-yell .about-yell__h3-01 {
    width: 100%;
  }
  .about-agency .about-yell .about-yell__h3-01 img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    height: auto;
  }
  .about-agency .about-yell .about-yell__figure-01 img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    height: auto;
    vertical-align: bottom;
  }
  .about-share {
    padding: 56px 19px;
  }
  .about-share .about-share__text {
    text-align: left;
  }
  .about-service {
    text-align: left;
    padding: 24px 0 44px;
    margin-bottom: -56px;
  }
  .about-service .body {
    width: 90%;
    padding: 0 5%;
  }
  .about-service .body > h2 {
    width: 100%;
    margin: 0 auto 40px;
  }
  .about-service .body > h2 img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .about-service .body > p {
    margin-bottom: 32px;
  }
  .about-service .body > .items {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .about-service .body > .items li {
    margin-bottom: 16px;
  }
  .about-service .body > .items li img {
    width: 100%;
  }
  .section-movie__group {
    gap: 24px;
    margin-bottom: 45px;
  }
  .section-movie__group .movie-title {
    font-size: 18px;
  }
  .section-movie__group .movie-title .movie-title__sup {
    font-size: 14px;
  }
  .section-movie__group .movie-thumb .movie-caption {
    font-size: 14px;
  }
}