@charset "UTF-8";
/**
colors
 */
/**
font family
 */
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
/*
  Made by Elly Loel - https://ellyloel.com/
  With inspiration from:
    - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
    - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
    - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

  Notes:
    - `:where()` is used to lower specificity for easy overriding.
*/
* {
  /* Remove default margin on everything */
  margin: 0;
  /* Remove default padding on everything */
  padding: 0;
  /* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
  line-height: calc(0.25rem + 1em + 0.25rem);
}

/* Use a more-intuitive box-sizing model on everything */
*,
::before,
::after {
  box-sizing: border-box;
}

/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
*:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat;
}

html {
  /* Allow percentage-based heights in the application */
  block-size: 100%;
  /* Making sure text size is only controlled by font-size */
  -webkit-text-size-adjust: none;
}

/* Smooth scrolling for users that don't prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}
body {
  /* https://marco.org/2012/11/15/text-rendering-optimize-legibility */
  text-rendering: optimizeSpeed;
  /* Allow percentage-based heights in the application */
  min-block-size: 100%;
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#example_2 */
  /* scrollbar-gutter: stable both-edges; Removed until this bug is fixed: https://bugs.chromium.org/p/chromium/issues/detail?id=1318404#c2 */
}

/* Improve media defaults */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
}

/* Remove stroke and set fill colour to the inherited font colour */
:where(svg) {
  stroke: none;
  fill: currentColor;
}

/* SVG's without a fill attribute */
:where(svg):where(:not([fill])) {
  /* Remove fill and set stroke colour to the inherited font colour */
  stroke: currentColor;
  fill: none;
  /* Rounded stroke */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Set a size for SVG's without a width attribute */
:where(svg):where(:not([width])) {
  inline-size: 5rem;
}

/* Remove built-in form typography styles */
:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

/* Change textarea resize to vertical only and block only if the browser supports that */
:where(textarea) {
  resize: vertical;
}

@supports (resize: block) {
  :where(textarea) {
    resize: block;
  }
}
/* Avoid text overflows */
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

/* Fix h1 font size inside article, aside, nav, and section */
h1 {
  font-size: 2em;
}

/* Position list marker inside */
:where(ul, ol) {
  list-style-position: inside;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
:where(ul, ol)[role=list] {
  list-style: none;
}

/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make it clear that interactive elements are interactive */
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  cursor: pointer;
  touch-action: manipulation;
}

:where(input[type=file]) {
  cursor: auto;
}

:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  cursor: pointer;
}

/* Animate focus outline */
@media (prefers-reduced-motion: no-preference) {
  :focus-visible {
    transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
  }
  :where(:not(:active)):focus-visible {
    transition-duration: 0.25s;
  }
}
:where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

/* Make sure users can't select button text */
:where(button, button[type], input[type=button], input[type=submit], input[type=reset]),
:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  text-align: center;
}

/* Disabled cursor for disabled buttons */
:where(button, button[type], input[type=button], input[type=submit], input[type=reset])[disabled] {
  cursor: not-allowed;
}

/**
font size
8px	0.5rem
9px	0.562rem
10px	0.625rem
11px	0.687rem
12px	0.75rem
13px	0.812rem
14px	0.875rem
15px	0.937rem
16px	1rem (base)
18px	1.125rem
20px	1.25rem
22px	1.375rem
24px	1.5rem
26px	1.625rem
28px	1.75rem
30px	1.875rem
32px	2rem
34px	2.125rem
36px	2.25rem
38px	2.375rem
40px	2.5rem
42px	2.625rem
 */
body {
  font-family: "Noto Sans JP", sans-serif;
}

html {
  scroll-behavior: smooth;
}

:root {
  font-size: 16px;
}

.main {
  padding-top: 75px;
}

@media screen and (min-width: 768px) {
  .main {
    padding-top: 65px;
  }
}
ul, li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 10000;
  max-width: 100vw;
  background-color: #FFFFFF;
}
.header_logo {
  padding: 12px;
  padding-left: 30px;
}

.header_field {
  height: 75px;
  align-items: center;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.header_box {
  height: 100%;
  display: flex;
  align-items: center;
}

.contactBox {
  background-color: #0074BF;
  font-size: 0.875rem;
  height: 100%;
}

.contactBox_link {
  color: #FFFFFF;
  height: 100%;
  display: flex;
  padding: 0 2em;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .header_field {
    height: 65px;
  }
}
.footer {
  padding: 60px 0 24px;
  border-top: solid 1px #E5E8ED;
  text-align: center;
}
.footer ul, .footer img {
  margin: auto;
}

.footer_box {
  padding-bottom: 45px;
}

.footer_cp {
  padding: 1em;
  text-align: center;
}

.firstView {
  background: #000;
}
.firstView_field {
  display: flex;
  width: 100%;
}
.firstView_field > * {
  width: 25%;
}

.sec {
  margin: auto;
  width: 1100px;
  max-width: 100%;
  padding: 0.5em;
}

@media screen and (max-width: 768px) {
  .sec {
    padding: 0 2.5vw;
  }
}
.col {
  display: flex;
}
.col-2 {
  width: 100%;
}

.col-wrap {
  flex-wrap: wrap;
}

.col-gap100 {
  gap: 100px;
}

@media screen and (max-width: 768px) {
  .col-sp-break {
    display: block;
  }
}
.row-2 {
  width: 50%;
}

.about {
  padding: 80px 0;
  background-image: url("../imgs/service/bk.png"), url("../imgs/service/bk_under.png");
  background-repeat: no-repeat;
  background-position: left top, right bottom;
  background-size: cover;
}
.about_header {
  text-align: center;
  padding-bottom: 50px;
}
.about_body {
  position: relative;
}
.about_body img {
  margin: auto;
}

.about_title {
  font-size: 2.625rem;
  color: #0074BF;
  padding-bottom: 1em;
}

.about_text {
  font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
  .about_title span {
    display: inline-block;
  }
  .about_body {
    justify-content: center;
    background-image: url("../imgs/service/sp/bk.png");
    background-position: center 120px;
    background-repeat: no-repeat;
  }
  .about_text {
    display: none;
  }
  .about .sec {
    padding: 0;
  }
}
.navigation {
  height: 100%;
}
.navigation_list {
  display: flex;
  height: 100%;
}
.navigation_item {
  font-size: 0.875rem;
}
.navigation_item-sp {
  display: none;
}
.navigation_link {
  display: flex;
  text-decoration: none;
  color: #333;
  padding: 0 1em;
  height: 100%;
  align-items: center;
}

.navigation_box {
  display: flex;
  align-items: center;
  gap: 4em;
  height: 100%;
}

.navigation_sp {
  display: none;
}

.navigation_hum {
  background-color: #0074BF;
  height: 75px;
}

.navigation_contact {
  height: 100%;
}

@media screen and (max-width: 768px) {
  .navigation {
    height: auto;
  }
  .navigation_list {
    padding: 2em 0;
    display: block;
    height: auto;
    text-align: center;
  }
  .navigation_item {
    font-size: 1.5rem;
  }
  .navigation_item-sp {
    display: block;
  }
  .navigation_link {
    color: #0074BF;
    padding: 0.5em 0;
    height: inherit;
    display: block;
  }
  .navigation_sp {
    display: block;
  }
  .navigation_hum {
    height: 65px;
    width: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navigation_pc {
    display: none;
  }
  .navigation_box {
    display: none;
    position: fixed;
    left: 0;
    top: 65px;
    z-index: 100;
    background-color: #E5E8ED;
    width: 100%;
    height: calc(100vh - 65px);
  }
  .navigation_hum_img--open {
    display: block;
  }
  .navigation_hum_img--close {
    display: none;
  }
  .navigation--act .navigation_box {
    display: block;
  }
  .navigation--act .navigation_hum_img--open {
    display: none;
  }
  .navigation--act .navigation_hum_img--close {
    display: block;
  }
  .navigation_data {
    padding: 1em;
  }
}
.curtainField {
  text-align: center;
  display: flex;
  min-height: 725px;
  max-height: 725px;
}
.curtainField img {
  margin: auto;
}
.curtainField:hover > * {
  width: 17%;
}
.curtainField_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  transition: width 0.8s;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.curtainField_item:hover {
  width: 49%;
}
.curtainField_item:hover .curtainField_data--nor {
  display: none;
}
.curtainField_item:hover .curtainField_data--hov {
  display: block;
}
.curtainField_item:hover .curtainField_icon--nor {
  display: none;
}
.curtainField_item:hover .curtainField_icon--hov {
  display: block;
}
.curtainField_item:hover .curtainField_linkText {
  border: solid 1px #FFFFFF;
  border-radius: 50%;
}
.curtainField_item:hover .curtainField_flag {
  display: block;
}
.curtainField_item:nth-child(1) {
  background-image: url("../imgs/fv/hand-of-touching-network-connecting-the-human-dots-icon-in-business-project-management.png");
}
.curtainField_item:nth-child(2) {
  background-image: url("../imgs/fv/business-people-rush-hour-walking-commuting-city-concept.png");
}
.curtainField_item:nth-child(3) {
  background-image: url("../imgs/fv/business-people-using-smart-phones-to-make-social-connections-faster.png");
}
.curtainField_item:nth-child(4) {
  background-image: url("../imgs/fv/landmarks-of-modern-city.png");
}
.curtainField_data--hov {
  display: none;
}
.curtainField_footer {
  position: absolute;
  left: 50%;
  bottom: 2em;
  transform: translate(-50%, 0);
}
.curtainField_icon--hov {
  display: none;
}

.curtainField_box {
  width: 100%;
  margin: auto;
  max-width: 100%;
}

.curtainField_title {
  font-size: 1.5rem;
  color: #FFFFFF;
  font-weight: bold;
}

.curtainField_imgWrap {
  margin-bottom: 1em;
  width: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.1) 0%, rgb(255, 255, 255) 26%, rgb(255, 255, 255) 75%, rgba(255, 255, 255, 0.1) 100%);
}

.curtainField_flag {
  position: absolute;
  left: 0px;
  top: 0px;
  color: white;
  background-color: orange;
  clip-path: polygon(0% 0%, 100% 0, 0 100%, 0% 50%);
  padding: 0.3em 0.3em;
  width: 240px;
  text-align: left;
  height: 3.5em;
  display: none;
}

.curtainField_description {
  font-size: 1.125rem;
  color: #FFFFFF;
  word-break: break-all;
  width: 495px;
  margin: auto;
  max-width: 100%;
  font-weight: bold;
  padding-right: 1em;
  padding-left: 1em;
}

.curtainField_icon {
  font-size: 2.625rem;
  color: #FFFFFF;
}

.curtainField_linkText {
  padding: 0.5em 0.5em;
  text-align: center;
  width: 6rem;
  height: 6rem;
  display: block;
}

.curtainField_link-inner {
  text-align: center;
  display: block;
  transition: transform 0.1s;
}
.curtainField_link-inner:hover {
  transform: rotateZ(90deg);
}

@media screen and (max-width: 768px) {
  .curtainField {
    text-align: center;
    display: block;
    min-height: auto;
    max-height: inherit;
  }
  .curtainField img {
    margin: auto;
  }
  .curtainField:hover > * {
    width: 100%;
    height: 15vh;
  }
  .curtainField_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    transition: height 0.3s;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 25vh;
  }
  .curtainField_item:hover {
    width: 100%;
    height: 45vh;
  }
  .curtainField_item:hover .curtainField_data--nor {
    display: none;
  }
  .curtainField_item:hover .curtainField_data--hov {
    display: block;
  }
  .curtainField_item:hover .curtainField_icon--nor {
    display: none;
  }
  .curtainField_item:hover .curtainField_icon--hov {
    display: block;
  }
  .curtainField_item:hover .curtainField_footer {
    position: absolute;
    left: 50%;
    bottom: 0em;
    transform: translate(-50%, 0);
    right: inherit;
    top: initial;
  }
  .curtainField_item:nth-child(1) {
    background-image: url("../imgs/fv/sp/business-people-rush-hour-walking-commuting-city-concept.png");
  }
  .curtainField_item:nth-child(2) {
    background-image: url("../imgs/fv/sp/business-people-using-smart-phones-to-make-social-connections-faster.png");
  }
  .curtainField_item:nth-child(3) {
    background-image: url("../imgs/fv/sp/hand-of-touching-network-connecting-the-human-dots-icon-in-business-project-management.png");
  }
  .curtainField_item:nth-child(4) {
    background-image: url("../imgs/fv/sp/landmarks-of-modern-city.png");
  }
  .curtainField_data--hov {
    display: none;
  }
  .curtainField_footer {
    position: absolute;
    left: auto;
    right: 3vw;
    bottom: auto;
    top: inherit;
    transform: translate(0, -50%);
  }
  .curtainField_icon--hov {
    display: none;
  }
  .curtainField_box {
    width: 80%;
    margin: auto;
    max-width: 100%;
    padding: 1em;
  }
  .curtainField_linkText {
    min-width: inherit;
    padding: 0;
  }
}
.boxCircle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.boxCircle_item {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 45%;
  height: auto;
  transform: translate(-50%, -50%);
}
.boxCircle_item > img {
  filter: drop-shadow(0 5px 30px rgba(0, 0, 0, 0.3));
}
.boxCircle_item .boxCircle_img-normal {
  display: block;
}
.boxCircle_item .boxCircle_img-hov {
  display: none;
}
.boxCircle_item:hover .boxCircle_img-normal {
  display: none;
}
.boxCircle_item:hover .boxCircle_img-hov {
  display: block;
}
.boxCircle_item:nth-child(1) {
  left: 50%;
  top: 20%;
}
.boxCircle_item:nth-child(2) {
  left: 22%;
  top: 42%;
}
.boxCircle_item:nth-child(3) {
  top: auto;
  left: 35%;
  bottom: 23%;
  transform: translate(-50%, 50%);
}
.boxCircle_item:nth-child(4) {
  top: auto;
  left: auto;
  right: 35%;
  bottom: 23%;
  transform: translate(50%, 50%);
}
.boxCircle_item:nth-child(5) {
  top: 42%;
  right: 22%;
  transform: translate(50%, -50%);
  left: auto;
}

@media screen and (max-width: 768px) {
  .boxCircle {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
    background-image: none;
    padding-top: 48px;
  }
  .boxCircle_item {
    position: initial;
    display: flex;
    transform: none;
    width: calc(50% - 5vw);
    max-width: 100%;
  }
  .boxCircle_item img {
    max-width: 45vw;
  }
  .boxCircle_item:nth-child(1) {
    width: 100%;
  }
  .boxCircle_item:nth-child(3) {
    transform: none;
  }
  .boxCircle_item:nth-child(4) {
    transform: none;
  }
  .boxCircle_item:nth-child(5) {
    transform: none;
  }
}
.service {
  margin-bottom: 1em;
  min-height: 450px;
  display: flex;
  align-items: center;
}
.service:nth-child(1) {
  background-image: url("../imgs/service/bk/oin.png");
  background-position: left top;
}
.service:nth-child(1) .service_box:last-child {
  background-color: white;
  box-shadow: 5px 0 50px rgba(0, 0, 0, 0.1);
}
.service:nth-child(2) {
  background-image: url("../imgs/service/bk/asarepo.png");
  background-position: right top;
}
.service:nth-child(2) .service_box:first-child {
  background-color: white;
  box-shadow: 5px 0 50px rgba(0, 0, 0, 0.1);
}
.service:nth-child(3) {
  background-image: url("../imgs/service/bk/kyuyo.png");
  background-position: left top;
}
.service:nth-child(3) .service_box:last-child {
  background-color: white;
  box-shadow: 5px 0 50px rgba(0, 0, 0, 0.1);
}
.service:nth-child(4) {
  background-image: url("../imgs/service/bk/nencho.png");
  background-position: right top;
}
.service:nth-child(4) .service_box:first-child {
  background-color: white;
  box-shadow: 5px 0 50px rgba(0, 0, 0, 0.1);
}
.service_field {
  display: flex;
}

.service_logo {
  margin: auto;
}

.service_title {
  padding-bottom: 1em;
}

.service_text {
  padding-bottom: 1.5em;
}

.service_box {
  width: 50%;
  padding: 50px;
  position: relative;
}

.service_balloonBox {
  position: absolute;
  left: 5%;
  top: -10%;
  max-width: 90%;
  transform: translate(0, 10%);
}

@media screen and (max-width: 768px) {
  .service {
    margin-bottom: 1em;
    min-height: inherit;
    padding-top: 245px;
    display: flex;
    align-items: center;
    background-size: contain;
  }
  .service:nth-child(1) {
    background-image: url("../imgs/service/bk/sp/oin.png");
    background-position: center top;
  }
  .service:nth-child(1) .service_box:last-child {
    display: block;
    box-shadow: none;
  }
  .service:nth-child(2) {
    background-image: url("../imgs/service/bk/sp/asarepo.png");
    background-position: center top;
  }
  .service:nth-child(2) .service_box:first-child {
    display: block;
    background-color: white;
    box-shadow: none;
  }
  .service:nth-child(3) {
    background-image: url("../imgs/service/bk/sp/kyuyo.png");
    background-position: center top;
  }
  .service:nth-child(3) .service_box:last-child {
    display: block;
    background-color: white;
    box-shadow: none;
  }
  .service:nth-child(4) {
    background-image: url("../imgs/service/bk/sp/nencho.png");
    background-position: center top;
  }
  .service:nth-child(4) .service_box:first-child {
    display: block;
    background-color: white;
    box-shadow: none;
  }
  .service_field {
    display: block;
    padding: 0;
    width: 100%;
  }
  .service_box {
    width: 100%;
    padding: 24px 3vw;
    display: none;
  }
}
.example {
  background-color: #F2FAFE;
  padding: 60px 0;
}

.example_header {
  background-image: url("../imgs/example/コンポーネント 4 – 1.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  padding: 70px 45px;
  color: #FFFFFF;
  position: relative;
}

.example_title {
  padding-bottom: 70px;
  font-size: 2rem;
}

.example_description {
  font-size: 1rem;
}
.example_description span {
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .example {
    padding: 0;
    padding-bottom: 24px;
  }
  .example .sec {
    width: 100%;
    padding: 0;
  }
  .example_header {
    background-image: url("../imgs/example/sp/コンポーネント 2 – 1.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding: 50px 4vw;
    color: #FFFFFF;
  }
  .example_title {
    padding-bottom: 36px;
    text-align: center;
  }
  span.example_text-sp_inline {
    display: inline;
  }
}
.postDataArea {
  padding: 80px 0;
  max-width: 430px;
  width: 50%;
}
.postDataArea_header {
  padding-bottom: 0.5em;
}
.postDataArea_title {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.postDataArea_post {
  border-bottom: solid 1px #E5E8ED;
}
.postDataArea_post:first-child {
  border-top: solid 1px #E5E8ED;
}

.postDataArea_subText {
  color: #0074BF;
  font-size: 1rem;
}

.postDataArea_titleText {
  font-size: 2.625rem;
}

@media screen and (max-width: 768px) {
  .postDataArea {
    padding: 50px 0;
    max-width: 100%;
    width: auto;
  }
  .postDataArea:first-child {
    padding-bottom: 0;
  }
}
.postData {
  padding: 24px 0;
}
.postData_header {
  font-size: 0.75rem;
  padding-bottom: 0.5em;
  display: flex;
  align-items: center;
}
.postData_date:after {
  content: "|";
  display: inline-block;
  font-size: 1.4em;
  padding-left: 1em;
  padding-right: 1em;
}
.postData_title {
  display: flex;
  gap: 0.5em;
}
.postData_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: calc(100% - 1em);
}

.postData_category {
  display: flex;
  gap: 0.5em;
}

.postData_categoryText {
  display: block;
  background-color: #43A9C9;
  color: #FFFFFF;
  padding: 3px 6px;
  text-decoration: none;
}

.serviceSite {
  padding: 60px 0;
}

.serviceSite_field {
  padding: 60px 40px;
  background-image: url("../imgs/site/bk.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
  display: block;
}

.serviceSite_title {
  font-size: 1.75rem;
  font-weight: normal;
  padding-bottom: 20px;
}

.serviceSite_header {
  padding-bottom: 24px;
}

.serviceSite_body span {
  display: inline-block;
}

.serviceSite_linkBox {
  display: block;
  position: absolute;
  bottom: 1em;
  right: 2em;
}
.serviceSite_linkBox .serviceSite_link-arrow {
  font-size: 1.5rem;
  width: auto;
  height: auto;
  padding: 1.8rem 2.05rem;
}

.serviceSite_link-text {
  display: none;
}

@media screen and (max-width: 768px) {
  .serviceSite {
    padding: 0;
  }
  .serviceSite .sec {
    padding: 0;
  }
  .serviceSite_field {
    padding: 60px 40px;
    background-image: url("../imgs/site/sp/bk.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }
  .serviceSite_header {
    text-align: center;
  }
  .serviceSite_header img {
    margin: auto;
  }
  .serviceSite_link-text {
    display: block;
  }
  .serviceSite_linkBox {
    padding-top: 2em;
    display: block;
    position: static;
  }
  .serviceSite_linkBox .serviceSite_link-arrow {
    font-size: 0.687rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
  }
}
.linkBox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}

.linkBox_text {
  font-size: 0.875rem;
  color: #0074BF;
}

.service_box .linkBox_text {
  border-bottom: solid 1px;
  padding-bottom: 5px;
  font-weight: bold;
}

.linkBox_arrow {
  background-color: #0074BF;
  color: #FFFFFF;
  font-size: 0.687rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.service_box .linkBox_text {
  border-bottom: solid 1px;
  padding-bottom: 5px;
  font-weight: bold;
}
.service_box .linkBox_arrow {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.infoBalloon {
  background-color: #FF8F12;
  padding: 0.5em 1em;
  border-radius: 6px;
  width: auto;
  position: relative;
}
.infoBalloon:after {
  content: " ";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  bottom: 2px;
  left: 1em;
  transform: translateY(100%);
  background-color: #FF8F12;
}

.infoBalloon_icon {
  align-items: center;
}

.infoBalloon_field {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.infoBalloon_text {
  color: white;
}

.caseList {
  padding: 3em 0 4em;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.caseData {
  padding: 16px;
  display: flex;
  gap: 1.5em;
  position: relative;
  background-color: #FFFFFF;
}

.caseData-list-box {
  width: calc(50% - 15px);
}

.caseData_imgWrap {
  border: solid 1px;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.caseData_tag {
  position: absolute;
  right: 0;
  top: 0;
  padding: 3px 6px;
  font-size: 0.75rem;
  background-color: #43A9C9;
  color: #FFFFFF;
}

.caseData_title {
  color: #0074BF;
  font-size: 1.125rem;
  padding: 1.5em 0 0.5em;
  margin-bottom: 0.8em;
  max-height: 4.5em;
  min-height: 4.5em;
  overflow: hidden;
}

.caseData_description {
  font-size: 0.875rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media screen and (max-width: 768px) {
  .caseList {
    padding: 3em 2vw 4em;
    display: block;
    gap: 30px;
  }
  .caseData {
    padding: 16px;
    display: flex;
    gap: 1.5em;
    position: relative;
    background-color: #FFFFFF;
    margin-bottom: 1em;
  }
  .caseData-list-box {
    width: 100%;
  }
}
.flex {
  display: flex;
}

.flex-j-cent {
  justify-content: center;
}

.flex-gap1 {
  gap: 1em;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-sep .flex_item:after {
  content: "|";
  display: inline-block;
  padding: 0.5em;
}
.flex-sep .flex_item:last-child:after {
  visibility: hidden;
}

@media screen and (max-width: 768px) {
  .flex-sp-wrap {
    flex-wrap: wrap;
  }
}
.postDataSec {
  gap: 3vw;
}

@media screen and (max-width: 925px) {
  .postDataSec {
    display: block;
  }
  .postDataArea {
    padding: 25px 0;
  }
}

/*# sourceMappingURL=top.css.map */