@charset "UTF-8";
/* ----------------------------------------------
  PC設定
  ------------------------------------------------*/
@media all and (min-width: 769px) {
  #container #contents .top_view {
    aspect-ratio: 1920/300;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(/images/service/topImage.jpg) center bottom 35%/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--s32_64);
  }
  #container #contents .top_view .page_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #container #contents .top_view .page_title .en {
    color: #fff;
    font-size: var(--s22_42);
  }
  #container #contents .top_view .page_title .en .big {
    font-size: var(--s32_64);
    color: var(--blue01);
  }
  #container #contents .top_view .page_title .jp {
    color: #fff;
    font-size: var(--s16_24);
  }
  #container #contents h2.title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto var(--s20_32);
    grid-gap: 0.5rem;
  }
  #container #contents h2.title .tit {
    font-size: var(--s20_32);
  }
  #container #contents h2.title::after {
    content: "";
    display: inline-block;
    width: 50%;
    height: 4px;
    border-radius: 3px;
    background-color: var(--blue01);
  }
  #container #contents .about {
    margin-bottom: var(--s50_100);
  }
  #container #contents .about .top_text {
    margin-bottom: var(--s30_50);
  }
  #container #contents .about .top_text .br {
    font-size: var(--s14_18);
    text-align: center;
  }
  #container #contents .service {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 4px solid var(--blue01);
  }
  #container #contents .service_box {
    position: relative;
    z-index: 1;
    width: 50%;
  }
  #container #contents .service_box:first-of-type, #container #contents .service_box:nth-of-type(2) {
    border-bottom: 4px solid var(--blue01);
  }
  #container #contents .service_box:nth-of-type(odd) .bg {
    border-right: 4px solid var(--blue01);
  }
  #container #contents .service_box .text_area {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: var(--s32_80) 4vw;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    grid-gap: 2rem 2%;
  }
  #container #contents .service_box .text_area .top {
    width: 50%;
  }
  #container #contents .service_box .text_area h3 {
    padding: 0.25em 2em;
    background-color: var(--blue01);
    color: #fff;
    font-size: var(--s18_24);
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 1.5em;
  }
  #container #contents .service_box .text_area .text {
    font-size: var(--s14_18);
    margin-bottom: var(--s16_32);
    text-shadow: 3px 3px 5px rgba(255, 255, 255, 0.4);
    width: 100%;
  }
  #container #contents .service_box .text_area .img {
    width: 48%;
    aspect-ratio: 3/2;
    display: flex;
    overflow: hidden;
  }
  #container #contents .service_box .text_area .img img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  #container #contents .service_box .text_area .details,
  #container #contents .service_box .text_area .feature {
    width: 49%;
    padding: var(--s16_24);
    background-color: rgba(255, 255, 255, 0.85);
  }
  #container #contents .service_box .text_area .details dt,
  #container #contents .service_box .text_area .feature dt {
    font-size: var(--s18_22);
    text-align: center;
    color: var(--blue01);
    width: 100%;
    margin-bottom: 0.5rem;
  }
  #container #contents .service_box .text_area .details .list .br,
  #container #contents .service_box .text_area .feature .list .br {
    display: flex;
    align-items: baseline;
    grid-gap: 0.25rem;
  }
  #container #contents .service_box .text_area .details .list .br:not(:last-of-type),
  #container #contents .service_box .text_area .feature .list .br:not(:last-of-type) {
    margin-bottom: 0.5em;
  }
  #container #contents .service_box .text_area .details .list .br .txt,
  #container #contents .service_box .text_area .feature .list .br .txt {
    font-size: var(--s14_18);
    width: calc(100% - 0.25rem - var(--s14_18));
  }
  #container #contents .service_box .text_area .details .list .br::before,
  #container #contents .service_box .text_area .feature .list .br::before {
    content: "";
    display: inline-block;
    width: var(--s14_18);
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: var(--blue01);
  }
  #container #contents .service_box .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #container #contents .service_box .bg::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.65) 60%, rgba(255, 255, 255, 0.55) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #container #contents .service_box .bg img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #container #contents .service_box.service01 .text_area .details {
    width: 100%;
  }
  #container #contents .area .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    grid-gap: var(--s16_24) 3%;
  }
  #container #contents .area .flex .text_area {
    width: 40%;
    padding-left: 5vw;
    max-width: 615px;
    margin-left: auto;
  }
  #container #contents .area .flex .text_area .title {
    align-items: flex-start;
    margin-left: 0;
  }
  #container #contents .area .flex .text_area .text {
    margin-bottom: var(--s16_32);
  }
  #container #contents .area .flex .text_area .text .br {
    font-size: var(--s14_18);
    line-height: 1.75;
  }
  #container #contents .area .flex .text_area .area_text {
    margin-bottom: var(--s24_42);
  }
  #container #contents .area .flex .text_area .area_text dt {
    font-size: var(--s18_20);
    color: var(--blue01);
  }
  #container #contents .area .flex .text_area .area_text dd span {
    font-size: var(--s14_16);
  }
  #container #contents .area .flex .text_area .catch {
    font-size: var(--s18_24);
    font-weight: bold;
    color: var(--blue01);
  }
  #container #contents .area .flex .img {
    width: 57%;
    padding-right: 5vw;
  }
}
@media all and (min-width: 861px) and (max-width: 1080px) {
  #container #contents .service_box .text_area .top {
    width: 100%;
  }
  #container #contents .service_box .text_area h3 {
    margin-bottom: 0.75em;
  }
  #container #contents .service_box .text_area .text {
    margin-bottom: 0;
  }
  #container #contents .service_box .text_area .img {
    width: 80%;
    margin: 0 auto;
  }
  #container #contents .service_box .text_area .details,
  #container #contents .service_box .text_area .feature {
    width: 100%;
  }
  #container #contents .service_box .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 4px solid var(--blue01);
  }
  #container #contents .service_box .bg::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.65) 60%, rgba(255, 255, 255, 0.55) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #container #contents .service_box .bg img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #container #contents .service_box.service01 .text_area .details {
    width: 100%;
  }
}
@media all and (max-width: 860px) {
  #container #contents .service_box {
    width: 100%;
  }
  #container #contents .service_box:nth-of-type(3) {
    border-bottom: 4px solid var(--blue01);
  }
  #container #contents .service_box:nth-of-type(odd) .bg {
    border-right: unset;
  }
}
/* ----------------------------------------------
  PAD設定
  ------------------------------------------------*/
@media all and (max-width: 768px) {
  #container #contents .top_view {
    aspect-ratio: 1920/500;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(/images/service/topImage.jpg) center bottom 35%/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--s32_64);
  }
  #container #contents .top_view .page_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #container #contents .top_view .page_title .en {
    color: #fff;
    font-size: var(--s22_42);
  }
  #container #contents .top_view .page_title .en .big {
    font-size: var(--s32_64);
    color: var(--blue01);
  }
  #container #contents .top_view .page_title .jp {
    color: #fff;
    font-size: var(--s16_24);
  }
  #container #contents h2.title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto var(--s20_32);
    grid-gap: 0.5rem;
  }
  #container #contents h2.title .tit {
    font-size: var(--s20_32);
  }
  #container #contents h2.title::after {
    content: "";
    display: inline-block;
    width: 50%;
    height: 4px;
    border-radius: 3px;
    background-color: var(--blue01);
  }
  #container #contents .about {
    margin-bottom: var(--s50_100);
  }
  #container #contents .about .top_text {
    margin-bottom: var(--s30_50);
  }
  #container #contents .about .top_text .br {
    font-size: var(--s14_18);
    text-align: center;
  }
  #container #contents .service {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 4px solid var(--blue01);
  }
  #container #contents .service_box {
    position: relative;
    z-index: 1;
    width: 100%;
  }
  #container #contents .service_box:not(:last-of-type) {
    border-bottom: 4px solid var(--blue01);
  }
  #container #contents .service_box .text_area {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: var(--s32_80) 4vw;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    grid-gap: 2rem 2%;
  }
  #container #contents .service_box .text_area .top {
    width: 50%;
  }
  #container #contents .service_box .text_area h3 {
    padding: 0.25em 2em;
    background-color: var(--blue01);
    color: #fff;
    font-size: var(--s18_24);
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 1.5em;
  }
  #container #contents .service_box .text_area .text {
    font-size: var(--s14_18);
    margin-bottom: var(--s16_32);
    text-shadow: 3px 3px 5px rgba(255, 255, 255, 0.4);
    width: 100%;
  }
  #container #contents .service_box .text_area .img {
    width: 48%;
    aspect-ratio: 3/2;
    display: flex;
    overflow: hidden;
  }
  #container #contents .service_box .text_area .img img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  #container #contents .service_box .text_area .details,
  #container #contents .service_box .text_area .feature {
    width: 49%;
    padding: var(--s16_24);
    background-color: rgba(255, 255, 255, 0.85);
  }
  #container #contents .service_box .text_area .details dt,
  #container #contents .service_box .text_area .feature dt {
    font-size: var(--s18_22);
    text-align: center;
    color: var(--blue01);
    width: 100%;
    margin-bottom: 0.5rem;
  }
  #container #contents .service_box .text_area .details .list .br,
  #container #contents .service_box .text_area .feature .list .br {
    display: flex;
    align-items: baseline;
    grid-gap: 0.25rem;
  }
  #container #contents .service_box .text_area .details .list .br:not(:last-of-type),
  #container #contents .service_box .text_area .feature .list .br:not(:last-of-type) {
    margin-bottom: 0.5em;
  }
  #container #contents .service_box .text_area .details .list .br .txt,
  #container #contents .service_box .text_area .feature .list .br .txt {
    font-size: var(--s14_18);
    width: calc(100% - 0.25rem - var(--s14_18));
  }
  #container #contents .service_box .text_area .details .list .br::before,
  #container #contents .service_box .text_area .feature .list .br::before {
    content: "";
    display: inline-block;
    width: var(--s14_18);
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: var(--blue01);
  }
  #container #contents .service_box .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #container #contents .service_box .bg::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.65) 60%, rgba(255, 255, 255, 0.55) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #container #contents .service_box .bg img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #container #contents .service_box.service01 .text_area .details {
    width: 100%;
  }
  #container #contents .area .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    grid-gap: var(--s16_24) 3%;
  }
  #container #contents .area .flex .text_area {
    width: 90%;
    margin: 0 auto;
  }
  #container #contents .area .flex .text_area .title {
    align-items: center;
  }
  #container #contents .area .flex .text_area .text {
    margin-bottom: var(--s16_32);
  }
  #container #contents .area .flex .text_area .text .br {
    font-size: var(--s14_18);
    line-height: 1.75;
    text-align: center;
  }
  #container #contents .area .flex .text_area .area_text {
    margin-bottom: var(--s24_42);
  }
  #container #contents .area .flex .text_area .area_text dt {
    font-size: var(--s18_20);
    color: var(--blue01);
    text-align: center;
  }
  #container #contents .area .flex .text_area .area_text dd span {
    font-size: var(--s14_16);
  }
  #container #contents .area .flex .text_area .catch {
    font-size: var(--s18_24);
    font-weight: bold;
    text-align: center;
    color: var(--blue01);
  }
  #container #contents .area .flex .img {
    width: 90%;
    margin: 0 auto;
  }
}
/* ----------------------------------------------
  SP設定
  ------------------------------------------------*/
@media all and (max-width: 520px) {
  #container #contents .top_view {
    aspect-ratio: 3/1;
  }
  #container #contents .about .top_text .br {
    text-align: left;
  }
  #container #contents .service_box .text_area {
    grid-gap: 0.75rem 0;
  }
  #container #contents .service_box .text_area .top {
    width: 100%;
  }
  #container #contents .service_box .text_area h3 {
    margin: 0 auto 0.75em;
  }
  #container #contents .service_box .text_area .text {
    margin: 0;
  }
  #container #contents .service_box .text_area .img {
    width: 100%;
  }
  #container #contents .service_box .text_area .details,
  #container #contents .service_box .text_area .feature {
    width: 100%;
  }
  #container #contents .service_box .text_area .details .list .br:not(:last-of-type),
  #container #contents .service_box .text_area .feature .list .br:not(:last-of-type) {
    margin-bottom: 0.25em;
  }
}