@charset "UTF-8";
:root {
  --font-size-base:15px;
  --font-size-large:calc(var(--font-size-base) * 1.25);
  --font-size-small:calc(var(--font-size-base) * 0.875);
  --border-radius-common:5px;
}

.din-condensed {
  font-family: "din-condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.inter- {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.biz-udpgothic-regular {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.biz-udpgothic-bold {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body {
  background: #0085CE;
}
.breadcrumb {
  padding: min(1.9841269841vw, 30px) 0;
}
@media screen and (max-width: 820px) {
  .breadcrumb {
    padding: 20px 0;
  }
}
.breadcrumb ul {
  width: min(82.0105820106vw, 1240px);
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  gap: min(2.9761904762vw, 45px);
  margin: 0 auto;
}
@media screen and (max-width: 820px) {
  .breadcrumb ul {
    width: calc(100% - 40px);
  }
}
.breadcrumb ul li a {
  display: inline-block;
  position: relative;
  color: #FFF;
}
.breadcrumb ul li a:after {
  content: "";
  display: block;
  width: min(0.9920634921vw, 15px);
  height: 1px;
  background: #FFF;
  position: absolute;
  right: max(-1.9841269841vw, -30px);
  top: 50%;
  z-index: 3;
}

main header.page_header {
  width: 100%;
  height: 600px;
  background: #EFEFEF;
  position: relative;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media screen and (max-width: 820px) {
  main header.page_header {
    min-height: 50vh;
    padding: 100px 0;
  }
}
main header.page_header .f_inner {
  width: 100%;
  min-height: 100%;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 3;
  color: #FFF;
}
@media screen and (max-width: 820px) {
  main header.page_header .f_inner {
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
main header.page_header .f_inner h1 {
  width: 50%;
  padding: min(3.3068783069vw, 50px);
  position: relative;
}
@media screen and (max-width: 820px) {
  main header.page_header .f_inner h1 {
    width: 100%;
    padding: 20px;
  }
}
main header.page_header .f_inner h1 .tit_jp {
  font-size: min(3.9682539683vw, 60px);
  font-family: "Inter";
}
@media screen and (max-width: 820px) {
  main header.page_header .f_inner h1 .tit_jp {
    font-size: 36px;
  }
}
main header.page_header .f_inner h1 .tit_en {
  font-size: min(3.9682539683vw, 60px);
  font-family: "din-condensed";
  position: absolute;
  left: 1em;
  top: -0.5em;
  opacity: 0.5;
}
@media screen and (max-width: 820px) {
  main header.page_header .f_inner h1 .tit_en {
    font-size: 24px;
  }
}
main header.page_header .f_inner .intro {
  width: 50%;
  padding: 0 min(3.3068783069vw, 50px) 0 0;
  line-height: 200%;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(3.3068783069vw, 50px);
}
@media screen and (max-width: 820px) {
  main header.page_header .f_inner .intro {
    width: 100%;
    padding: 20px;
    gap: 20px;
  }
}
main header.page_header .button_area {
  width: 100%;
  padding: min(3.3068783069vw, 50px) 0;
  position: relative;
  z-index: 3;
}
main header.page_header .button_area p {
  text-align: center;
}
main header.page_header picture {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
main header.page_header picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main header.page_header:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}
main .breadcrumb {
  background: #0085CE;
  color: #FFF;
}
main #main {
  background: #0085CE;
}
main #main .inner {
  width: min(82.0105820106vw, 1240px);
  margin: auto;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  flex-grow: 0; /* ← これで空きスペースを広げない */
  flex-shrink: 0; /* （必要なら）縮まないようにする */
  flex-basis: min(82.0105820106vw, 1240px);
  gap: min(3.3068783069vw, 50px);
  padding: min(3.3068783069vw, 50px) 0;
}
@media screen and (max-width: 820px) {
  main #main .inner {
    width: calc(100% - 40px);
    flex-grow: 0; /* ← これで空きスペースを広げない */
    flex-shrink: 0; /* （必要なら）縮まないようにする */
    flex-basis: calc(100% - 40px) !important;
    gap: 20px;
  }
}
main #main .inner h2, main #main .inner h3, main #main .inner h4, main #main .inner h5, main #main .inner h6, main #main .inner p, main #main .inner li {
  line-height: 1.5em;
  color: #FFF;
  display: block;
  width: 100%;
}
main #main .inner h2, main #main .inner h3, main #main .inner h4, main #main .inner h5, main #main .inner h6 {
  margin-top: min(1.3227513228vw, 20px);
}
@media screen and (max-width: 820px) {
  main #main .inner h2, main #main .inner h3, main #main .inner h4, main #main .inner h5, main #main .inner h6 {
    margin-top: 10px;
  }
}
main #main .inner p, main #main .inner li {
  line-height: 200%;
}
main #main .inner h2 {
  font-size: min(2.1164021164vw, 32px);
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
main #main .inner h2 span {
  display: inline-block;
  position: relative;
}
main #main .inner h2 span:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: #FFF;
  position: absolute;
  bottom: -1px;
  left: 0;
}
@media screen and (max-width: 820px) {
  main #main .inner h2 {
    font-size: 28px;
  }
}
main #main .inner h3 {
  font-size: min(1.8518518519vw, 28px);
}
@media screen and (max-width: 820px) {
  main #main .inner h3 {
    font-size: 24px;
  }
}
main #main .inner h4 {
  font-size: min(1.5873015873vw, 24px);
}
@media screen and (max-width: 820px) {
  main #main .inner h4 {
    font-size: 20px;
  }
}
main #main .inner h5 {
  font-size: min(1.3227513228vw, 20px);
}
@media screen and (max-width: 820px) {
  main #main .inner h5 {
    font-size: 18px;
  }
}
main #main .inner p {
  font-size: min(1.0582010582vw, 16px);
  line-height: 200%;
  display: block;
}
@media screen and (max-width: 820px) {
  main #main .inner p {
    font-size: 16px;
  }
}
main #main .inner ol {
  list-style-type: decimal;
}
main #main .inner ol li {
  list-style-type: decimal;
}
main #main .inner img {
  border-radius: 5px;
}
main #main.service, main #main.web, main #main.vp, main #main.event, main #main.fm, main #main.sns, main #main.garden, main #main.music-publishing, main #main.cdp, main #main.advertising {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
}
main #main.service h2, main #main.web h2, main #main.vp h2, main #main.event h2, main #main.fm h2, main #main.sns h2, main #main.garden h2, main #main.music-publishing h2, main #main.cdp h2, main #main.advertising h2 {
  font-size: min(2.380952381vw, 36px);
  text-align: center;
  color: #FFF;
  padding: min(3.3068783069vw, 50px) 0;
  line-height: 1.5em;
}
@media screen and (max-width: 820px) {
  main #main.service h2, main #main.web h2, main #main.vp h2, main #main.event h2, main #main.fm h2, main #main.sns h2, main #main.garden h2, main #main.music-publishing h2, main #main.cdp h2, main #main.advertising h2 {
    font-size: 21px;
    padding: 20px 0;
  }
}
main #main.about, main #main.company, main #main.contact, main #main.request, main #main.privacy {
  width: min(82.0105820106vw, 1240px);
  margin: 0 auto;
  color: #FFF;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(1.9841269841vw, 30px);
  padding: min(3.3068783069vw, 50px) 0;
}
@media screen and (max-width: 820px) {
  main #main.about, main #main.company, main #main.contact, main #main.request, main #main.privacy {
    width: calc(100% - 40px);
    gap: 30px;
    padding: 30px 0;
  }
}
main #main.about h2, main #main.about h3, main #main.about h4, main #main.about h5, main #main.about h6, main #main.about p, main #main.about li, main #main.company h2, main #main.company h3, main #main.company h4, main #main.company h5, main #main.company h6, main #main.company p, main #main.company li, main #main.contact h2, main #main.contact h3, main #main.contact h4, main #main.contact h5, main #main.contact h6, main #main.contact p, main #main.contact li, main #main.request h2, main #main.request h3, main #main.request h4, main #main.request h5, main #main.request h6, main #main.request p, main #main.request li, main #main.privacy h2, main #main.privacy h3, main #main.privacy h4, main #main.privacy h5, main #main.privacy h6, main #main.privacy p, main #main.privacy li {
  line-height: 1.5em;
  color: #FFF;
  display: block;
  width: 100%;
}
main #main.about h2, main #main.about h3, main #main.about h4, main #main.about h5, main #main.about h6, main #main.company h2, main #main.company h3, main #main.company h4, main #main.company h5, main #main.company h6, main #main.contact h2, main #main.contact h3, main #main.contact h4, main #main.contact h5, main #main.contact h6, main #main.request h2, main #main.request h3, main #main.request h4, main #main.request h5, main #main.request h6, main #main.privacy h2, main #main.privacy h3, main #main.privacy h4, main #main.privacy h5, main #main.privacy h6 {
  margin-top: min(1.3227513228vw, 20px);
}
main #main.about p, main #main.about li, main #main.company p, main #main.company li, main #main.contact p, main #main.contact li, main #main.request p, main #main.request li, main #main.privacy p, main #main.privacy li {
  line-height: 200%;
}
main #main.about h2, main #main.company h2, main #main.contact h2, main #main.request h2, main #main.privacy h2 {
  font-size: min(2.1164021164vw, 32px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
main #main.about h2 span, main #main.company h2 span, main #main.contact h2 span, main #main.request h2 span, main #main.privacy h2 span {
  display: inline-block;
  position: relative;
}
main #main.about h2 span:after, main #main.company h2 span:after, main #main.contact h2 span:after, main #main.request h2 span:after, main #main.privacy h2 span:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: #FFF;
  position: absolute;
  bottom: -1px;
  left: 0;
}
@media screen and (max-width: 820px) {
  main #main.about h2, main #main.company h2, main #main.contact h2, main #main.request h2, main #main.privacy h2 {
    font-size: 28px;
  }
}
main #main.about h3, main #main.company h3, main #main.contact h3, main #main.request h3, main #main.privacy h3 {
  font-size: min(1.8518518519vw, 28px);
}
@media screen and (max-width: 820px) {
  main #main.about h3, main #main.company h3, main #main.contact h3, main #main.request h3, main #main.privacy h3 {
    font-size: 24px;
  }
}
main #main.about h4, main #main.company h4, main #main.contact h4, main #main.request h4, main #main.privacy h4 {
  font-size: min(1.5873015873vw, 24px);
}
@media screen and (max-width: 820px) {
  main #main.about h4, main #main.company h4, main #main.contact h4, main #main.request h4, main #main.privacy h4 {
    font-size: 20px;
  }
}
main #main.about h5, main #main.company h5, main #main.contact h5, main #main.request h5, main #main.privacy h5 {
  font-size: min(1.3227513228vw, 20px);
}
@media screen and (max-width: 820px) {
  main #main.about h5, main #main.company h5, main #main.contact h5, main #main.request h5, main #main.privacy h5 {
    font-size: 18px;
  }
}
main #main.about p, main #main.company p, main #main.contact p, main #main.request p, main #main.privacy p {
  font-size: min(1.0582010582vw, 16px);
  line-height: 200%;
  display: block;
}
@media screen and (max-width: 820px) {
  main #main.about p, main #main.company p, main #main.contact p, main #main.request p, main #main.privacy p {
    font-size: 16px;
  }
}
main #main.about ol, main #main.company ol, main #main.contact ol, main #main.request ol, main #main.privacy ol {
  list-style-type: decimal;
}
main #main.about ol li, main #main.company ol li, main #main.contact ol li, main #main.request ol li, main #main.privacy ol li {
  list-style-type: decimal;
}
main #main.about img, main #main.company img, main #main.contact img, main #main.request img, main #main.privacy img {
  border-radius: 5px;
}
main #main.about iframe, main #main.company iframe, main #main.contact iframe, main #main.request iframe, main #main.privacy iframe {
  width: 100%;
  min-height: min(26.455026455vw, 400px);
}
main #main.media {
  width: min(82.0105820106vw, 1240px);
  margin: 0 auto;
  color: #FFF;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  gap: min(3.3068783069vw, 50px);
  padding: min(3.3068783069vw, 50px) 0;
}
main #main.media .contents {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(3.3068783069vw, 50px);
  width: calc(70% - min(3.3068783069vw, 50px));
}
main #main.media .contents h2, main #main.media .contents h3, main #main.media .contents h4, main #main.media .contents h5, main #main.media .contents h6 {
  line-height: 1.5em;
  color: #FFF;
  display: block;
}
main #main.media .contents h2 {
  font-size: min(2.1164021164vw, 32px);
}
main #main.media .contents h3 {
  font-size: min(1.8518518519vw, 28px);
}
main #main.media .contents h4 {
  font-size: min(1.3888888889vw, 21px);
}
main #main.media .contents h5 {
  font-size: min(1.1904761905vw, 18px);
}
main #main.media .contents p {
  font-size: min(0.9920634921vw, 15px);
  line-height: 200%;
  display: block;
}
main #main.media .contents img {
  border-radius: 5px;
}
main #main.media aside {
  width: 30%;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(3.3068783069vw, 50px);
}
main #main.media aside h2 {
  font-size: min(1.8518518519vw, 28px);
}
main #main.media aside h3 {
  font-size: min(1.3888888889vw, 21px);
}
main #main.media aside h4 {
  font-size: min(1.1904761905vw, 18px);
}
main #main.media aside h5 {
  font-size: min(1.0582010582vw, 16px);
}
main #main.media aside .archive-list {
  color: #FFF;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(1.6534391534vw, 25px);
}
main #main.media aside .archive-list a {
  color: #FFF;
  transition: 0.3s ease all;
  text-decoration: none;
}
main #main.media aside .archive-list a:hover {
  color: #F3F3F3;
  transition: 0.2s ease all;
  text-decoration: underline;
}
main #main.media aside .archive-list li {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  gap: min(1.3227513228vw, 20px);
}
main #main.media aside .archive-list li .thumb {
  width: min(3.9682539683vw, 60px);
  height: min(3.9682539683vw, 60px);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  background-color: #0077B8;
}
main #main.media aside .archive-list li .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
main #main.media aside .archive-list li .meta {
  width: calc(100% - min(5.291005291vw, 80px));
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(0.6613756614vw, 10px);
}
main #main.service, main #main.about {
  width: min(82.0105820106vw, 1240px);
  margin: 0 auto;
  gap: min(3.3068783069vw, 50px);
}
@media screen and (max-width: 820px) {
  main #main.service, main #main.about {
    gap: 20px;
    width: calc(100% - 40px);
  }
}
main #main.service h2, main #main.service h3, main #main.service h4, main #main.service h5, main #main.service h6, main #main.about h2, main #main.about h3, main #main.about h4, main #main.about h5, main #main.about h6 {
  line-height: 1.5em;
  color: #FFF;
}
main #main.service p, main #main.about p {
  line-height: 1.5em;
  color: #FFF;
  font-size: min(1.1904761905vw, 18px);
}
@media screen and (max-width: 820px) {
  main #main.service p, main #main.about p {
    font-size: 16px;
    line-height: 200%;
  }
}
main #main.service .wp-block-columns, main #main.about .wp-block-columns {
  gap: min(3.3068783069vw, 50px);
}
@media screen and (max-width: 820px) {
  main #main.service .wp-block-columns, main #main.about .wp-block-columns {
    gap: 20px;
  }
}
main #main.service .service_cnt, main #main.about .service_cnt {
  background: #0077B8;
  border-radius: 5px;
  width: calc(50% - min(1.9841269841vw, 30px));
  padding: min(2.6455026455vw, 40px);
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(1.9841269841vw, 30px);
}
@media screen and (max-width: 820px) {
  main #main.service .service_cnt, main #main.about .service_cnt {
    width: 100%;
    padding: 30px;
    gap: 20px;
  }
}
main #main.service .service_cnt h3, main #main.about .service_cnt h3 {
  padding: 0 0 0.7em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-family: Inter;
  font-size: min(1.5873015873vw, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.5em;
}
@media screen and (max-width: 820px) {
  main #main.service .service_cnt h3, main #main.about .service_cnt h3 {
    font-size: 20px;
  }
}
main #main.service .service_cnt p, main #main.about .service_cnt p {
  font-family: Inter;
  font-size: min(0.9259259259vw, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 200%; /* 28px */
}
@media screen and (max-width: 820px) {
  main #main.service .service_cnt p, main #main.about .service_cnt p {
    font-size: 14px;
  }
}
main #main.service .service_cnt p.button, main #main.about .service_cnt p.button {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
main #main.works {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: min(82.0105820106vw, 1240px);
  margin: auto;
  gap: min(3.3068783069vw, 50px);
  padding: min(3.3068783069vw, 50px) 0;
  position: relative;
}
@media screen and (max-width: 820px) {
  main #main.works {
    width: calc(100% - 40px);
    gap: 20px;
    padding: 20px 0;
  }
}
main #main.works .works_cnt {
  width: calc(100% - min(23.1481481481vw, 350px));
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(1.9841269841vw, 30px);
}
@media screen and (max-width: 820px) {
  main #main.works .works_cnt {
    width: 100%;
  }
}
main #main.works .works_cnt h2, main #main.works .works_cnt h3, main #main.works .works_cnt h4, main #main.works .works_cnt h5, main #main.works .works_cnt h6 {
  margin-top: min(1.3227513228vw, 20px);
}
main #main.works .works_cnt h2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
main #main.works .works_cnt h2 span {
  display: inline-block;
  position: relative;
}
main #main.works .works_cnt h2 span:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: #FFF;
  position: absolute;
  bottom: -1px;
  left: 0;
}
main #main.works .works_cnt .gallery_cnt {
  border-radius: 20px;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(3.3068783069vw, 50px);
}
main #main.works aside {
  width: min(19.8412698413vw, 300px);
  position: relative;
}
@media screen and (max-width: 820px) {
  main #main.works aside {
    width: 100%;
  }
}
main #main.works aside .meta_data {
  position: sticky;
  top: 150px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #FFF;
  padding: min(1.9841269841vw, 30px);
}
main #main.works aside .meta_data dl dt {
  width: 100%;
  padding: min(1.3227513228vw, 20px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}
main #main.works aside .meta_data dl dd {
  width: 100%;
  padding: min(1.3227513228vw, 20px) 0;
}
main #main.works h2 {
  font-size: min(2.380952381vw, 36px);
  color: #FFF;
  line-height: 1.5em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
main #main.works h2 span {
  display: inline-block;
  position: relative;
}
main #main.works h2 span:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: #FFF;
  position: absolute;
  bottom: -1px;
  left: 0;
}
@media screen and (max-width: 820px) {
  main #main.works h2 {
    font-size: 21px;
  }
}
main #main.works p {
  font-size: var(--font-size-base);
  color: #FFF;
  line-height: 200%;
}
main #main .wpcf7 {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: min(2.6455026455vw, 40px);
}
@media screen and (max-width: 820px) {
  main #main .wpcf7 {
    padding: 20px;
  }
}
main #main .wpcf7 dl {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  gap: min(2.6455026455vw, 40px);
}
@media screen and (max-width: 820px) {
  main #main .wpcf7 dl {
    flex-direction: column;
    gap: 20px;
  }
}
main #main .wpcf7 dl dt {
  width: 30%;
  padding-top: min(2.6455026455vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 820px) {
  main #main .wpcf7 dl dt {
    width: 100%;
    padding-top: 20px;
  }
}
main #main .wpcf7 dl dt p {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
main #main .wpcf7 dl dt .required {
  background: #FF0D00;
  color: #FFF;
  padding: 0 10px;
  border-radius: 3px;
  font-size: min(0.6613756614vw, 10px);
  font-style: normal;
}
@media screen and (max-width: 820px) {
  main #main .wpcf7 dl dt .required {
    font-size: 10px;
  }
}
main #main .wpcf7 dl dt .any {
  background: #333333;
  color: #FFF;
  padding: 0 10px;
  border-radius: 3px;
  font-size: min(0.6613756614vw, 10px);
  font-style: normal;
}
@media screen and (max-width: 820px) {
  main #main .wpcf7 dl dt .any {
    font-size: 10px;
  }
}
main #main .wpcf7 dl dd {
  width: calc(70% - min(2.6455026455vw, 40px));
  padding-top: min(2.6455026455vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 820px) {
  main #main .wpcf7 dl dd {
    width: 100%;
    padding-top: 20px;
  }
}
main #main .wpcf7 .form-button {
  text-align: center;
  padding: min(2.6455026455vw, 40px);
}
@media screen and (max-width: 820px) {
  main #main .wpcf7 .form-button {
    padding: 20px;
  }
}
main #main #wpcf7cpcnf {
  padding: min(2.6455026455vw, 40px);
}
main #main #wpcf7cpcnf table {
  border-collapse: separate;
  border-spacing: min(2.6455026455vw, 40px);
}
main #main #wpcf7cpcnf table th {
  text-align: left;
  padding-top: min(2.6455026455vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
main #main #wpcf7cpcnf table td {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: min(2.6455026455vw, 40px);
}

#ajax-posts {
  width: 100%;
}

.works-list {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  gap: min(3.3068783069vw, 50px);
}
@media screen and (max-width: 820px) {
  .works-list {
    gap: 20px;
  }
}
.works-list li {
  width: calc((100% - min(6.6137566138vw, 100px)) / 3);
}
@media screen and (max-width: 820px) {
  .works-list li {
    width: calc((100% - 20px) / 2);
  }
}
.works-list li figure {
  display: flex;
  flex-direction: column;
  gap: min(1.3227513228vw, 20px);
}
@media screen and (max-width: 820px) {
  .works-list li figure {
    gap: 10px;
  }
}
.works-list li figure .thumb {
  background: #FFF;
  border-radius: 5px;
  display: block;
  aspect-ratio: 1/1;
  border-radius: 5px;
  overflow: hidden;
}
.works-list li figure .thumb a {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.works-list li figure .thumb a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.1);
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.works-list li figure .thumb a:hover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.works-list li figure figcaption {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(0.9920634921vw, 15px);
}
@media screen and (max-width: 820px) {
  .works-list li figure figcaption {
    gap: 10px;
  }
}
.works-list li figure figcaption span {
  display: block;
}
.works-list li figure figcaption a.to_detail {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(0.6613756614vw, 10px);
  font-weight: 700;
}
@media screen and (max-width: 820px) {
  .works-list li figure figcaption a.to_detail {
    gap: 10px;
  }
}
.works-list li figure figcaption .client_name {
  font-size: min(0.7275132275vw, 11px);
}
@media screen and (max-width: 820px) {
  .works-list li figure figcaption .client_name {
    font-size: 11px;
  }
}
.works-list li figure figcaption .tit {
  font-size: min(0.9920634921vw, 15px);
  line-height: 1.5em;
}
@media screen and (max-width: 820px) {
  .works-list li figure figcaption .tit {
    font-size: 15px;
  }
}
.works-list li figure figcaption .tags {
  font-size: min(0.5952380952vw, 9px);
}
@media screen and (max-width: 820px) {
  .works-list li figure figcaption .tags {
    font-size: 9px;
  }
}
.works-list li figure figcaption .tags a {
  color: #F3F3F3;
  display: inline-block;
  margin: 0 5px 5px 0;
}
.works-list li a {
  color: #FFF;
  text-decoration: none;
}

.shifts {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: min(82.0105820106vw, 1240px);
  margin: auto;
  padding: min(6.6137566138vw, 100px) 0;
  gap: min(3.3068783069vw, 50px);
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 820px) {
  .shifts {
    width: calc(100% - 40px);
    padding: 80px 0;
    gap: 80px;
  }
}
.shifts > div {
  width: calc((100% - min(6.6137566138vw, 100px)) / 3);
}
.shifts > div:nth-child(1) {
  transform: translateY(max(-3.3068783069vw, -50px));
}
@media screen and (max-width: 820px) {
  .shifts > div:nth-child(1) {
    transform: translateY(0);
  }
}
.shifts > div:nth-child(3) {
  transform: translateY(min(3.3068783069vw, 50px));
}
@media screen and (max-width: 820px) {
  .shifts > div:nth-child(3) {
    transform: translateY(0);
  }
}
@media screen and (max-width: 820px) {
  .shifts > div {
    width: 100%;
    transform: translateY(0);
  }
}

.s_over {
  width: 100%;
  aspect-ratio: 3/1;
  overflow: visible;
  position: relative;
}
.s_over img {
  position: absolute;
  bottom: 0;
}

@media screen and (max-width: 820px) {
  .abilities .shifts {
    gap: 20px;
  }
}
.abilities .shifts:nth-child(2) {
  padding: min(6.6137566138vw, 100px) 0 min(1.6534391534vw, 25px) 0;
}
@media screen and (max-width: 820px) {
  .abilities .shifts:nth-child(2) {
    padding: 0 0 20px;
  }
}
.abilities .shifts:nth-child(3) {
  padding: min(1.6534391534vw, 25px) 0 min(6.6137566138vw, 100px) 0;
}
@media screen and (max-width: 820px) {
  .abilities .shifts:nth-child(3) {
    padding: 0 0 20px;
  }
}

.block_blue {
  background: #0077B8;
  color: #FFF;
  padding: min(1.9841269841vw, 30px);
  border-radius: 5px;
}
@media screen and (max-width: 820px) {
  .block_blue {
    padding: 20px;
  }
}
.block_blue h3 {
  font-size: min(1.3227513228vw, 20px);
  padding: min(1.9841269841vw, 30px) 0;
  line-height: 1.5em;
}
@media screen and (max-width: 820px) {
  .block_blue h3 {
    font-size: 18px;
    padding: 20px 0;
  }
}
.block_blue p {
  line-height: 200%;
}

.block_transparent_b {
  background: rgba(0, 0, 0, 0.6);
  color: #FFF;
  padding: min(1.9841269841vw, 30px);
  border-radius: 5px;
}
@media screen and (max-width: 820px) {
  .block_transparent_b {
    padding: 20px;
  }
}
.block_transparent_b h3 {
  font-size: min(1.3227513228vw, 20px);
  padding: 0 0 min(1.3227513228vw, 20px) 0;
  margin: 0 0 min(1.3227513228vw, 20px) 0;
  line-height: 1.5em;
  text-align: center;
  border-bottom: 1px solid #FFF;
}
@media screen and (max-width: 820px) {
  .block_transparent_b h3 {
    font-size: 18px;
  }
}
.block_transparent_b p {
  line-height: 200%;
}

.point_wrap {
  width: min(82.0105820106vw, 1240px);
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  gap: min(3.3068783069vw, 50px);
  margin: auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center !important;
  position: relative;
}
@media screen and (max-width: 820px) {
  .point_wrap {
    width: calc(100% - 40px);
    gap: 20px;
  }
}
.point_wrap figure {
  width: 100%;
  border-radius: 5px;
  aspect-ratio: 16/9;
  background: #FFF;
}
.point_wrap figure img {
  border-radius: 5px;
}
.point_wrap:nth-child(1) {
  flex-direction: row-reverse;
}
.point_wrap:nth-child(1):after {
  content: "";
  display: block;
  height: 100%;
  aspect-ratio: 95/320;
  position: absolute;
  right: 0;
  top: 0;
  background: url("../images/bg_num_01.svg") no-repeat;
  background-size: contain;
  opacity: 0.1;
}
.point_wrap:nth-child(2) {
  flex-direction: row;
}
.point_wrap:nth-child(2):after {
  content: "";
  display: block;
  height: 100%;
  aspect-ratio: 245/340;
  position: absolute;
  right: calc(50% + min(1.6534391534vw, 25px));
  top: 0;
  background: url("../images/bg_num_02.svg") no-repeat;
  background-size: contain;
  opacity: 0.1;
}
.point_wrap:nth-child(3) {
  flex-direction: row-reverse;
}
.point_wrap:nth-child(3):after {
  content: "";
  display: block;
  height: 100%;
  aspect-ratio: 218/340;
  position: absolute;
  right: 0;
  top: 0;
  background: url("../images/bg_num_03.svg") no-repeat;
  background-size: contain;
  opacity: 0.1;
}
.point_cnt {
  width: calc(50% - min(1.6534391534vw, 25px));
  color: #FFF;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(2.3148148148vw, 35px);
}
.point_cnt h3 {
  font-size: min(2.1164021164vw, 32px);
  line-height: 1.3em;
}
@media screen and (max-width: 820px) {
  .point_cnt h3 {
    font-size: 18px;
  }
}
.point_cnt p {
  font-size: min(0.9920634921vw, 15px);
  line-height: 200%;
}
@media screen and (max-width: 820px) {
  .point_cnt p {
    font-size: 15px;
  }
}

.cnt._blue {
  background: #0077B8;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(6.6137566138vw, 100px);
  padding: min(6.6137566138vw, 100px) 0;
}
@media screen and (max-width: 820px) {
  .cnt._blue {
    gap: 40px;
    padding: 40px 0;
  }
}
.bg_img_area {
  background: #333333;
  position: relative;
  z-index: 1;
}
.bg_img_area h2 {
  position: relative;
  z-index: 5;
}
.bg_img_cnt {
  position: absolute;
  width: 100vw;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
}
.bg_img_cnt > div {
  width: 100%;
  height: 100%;
  position: relative;
}
.bg_img_cnt > div:after {
  width: 100%;
  height: 100%;
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-image: linear-gradient(0deg, #ffffff, transparent);
}
.bg_img_cnt > div > .wp-block-image {
  width: 100%;
  height: 100%;
}
.bg_img_cnt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
  opacity: 0.8;
}

.service_last_area p {
  font-size: min(1.5873015873vw, 24px);
  line-height: 200%;
  color: #FFF;
  text-align: center;
  font-weight: 700;
  padding: min(7.9365079365vw, 120px);
  backdrop-filter: blur(5px);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 820px) {
  .service_last_area p {
    font-size: 18px;
  }
}

.search_area {
  width: min(82.0105820106vw, 1240px);
  margin: 0 auto;
}
@media screen and (max-width: 820px) {
  .search_area {
    width: calc(100% - 40px);
  }
}
.search_area .checkbox-wrap {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: min(1.3227513228vw, 20px);
}
.search_area .checkbox-wrap h2 {
  width: calc((100% - min(1.3227513228vw, 20px)) / 3);
  color: #FFF;
  font-size: min(2.1164021164vw, 32px);
}
@media screen and (max-width: 820px) {
  .search_area .checkbox-wrap h2 {
    font-size: 21px;
  }
}
.search_area .checkbox-wrap #category-form {
  width: calc((100% - min(6.6137566138vw, 100px)) / 3 * 2 + min(3.3068783069vw, 50px));
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  gap: min(1.3227513228vw, 20px);
  background: #0077B8;
  border-radius: 5px;
  padding: min(1.9841269841vw, 30px);
}
@media screen and (max-width: 820px) {
  .search_area .checkbox-wrap #category-form {
    gap: 15px;
    padding: 15px;
  }
}
.search_area .checkbox-wrap #category-form label {
  color: #FFF;
}
.search_area .checkbox-wrap #category-form label input {
  margin-right: 0.5em;
}

#media {
  width: min(82.0105820106vw, 1240px);
  padding: min(3.9682539683vw, 60px) 0;
  margin: auto;
}
#media h2 .tit_en {
  color: #0085CE;
}
#media .media_wrap {
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  gap: min(1.9841269841vw, 30px) min(0.6613756614vw, 10px);
  padding: min(3.9682539683vw, 60px) 0 0;
}
@media screen and (max-width: 820px) {
  #media .media_wrap {
    gap: 30px;
    padding: 60px 0 0;
  }
}
#media .media_cnt {
  width: calc((100% - min(1.3227513228vw, 20px)) / 3);
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(1.3227513228vw, 20px);
}
@media screen and (max-width: 820px) {
  #media .media_cnt {
    width: 100%;
    gap: 20px;
  }
}
#media .media_cnt figure {
  width: 100%;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  flex-direction: column;
  gap: min(1.3227513228vw, 20px) 0;
  padding-bottom: min(1.3227513228vw, 20px);
  border-bottom: 1px solid #EFEFEF;
}
@media screen and (max-width: 820px) {
  #media .media_cnt figure {
    gap: 20px;
    padding-bottom: 20px;
  }
}
#media .media_cnt figure a {
  display: block;
  color: #FFF;
  text-decoration: none;
}
#media .media_cnt figure a.thumb {
  display: block;
  width: 100%;
  aspect-ratio: 2/1;
  border-radius: 5px;
  background: #EFEFEF;
  position: relative;
  overflow: hidden;
}
#media .media_cnt figure a.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#media .media_cnt figure a.tit {
  display: block;
  line-height: 1.5em;
}
#media .media_cnt figure a:hover.thumb img {
  transform: scale(1.2);
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#media .media_cnt figure figcaption {
  display: block;
}
#media .media_cnt .suppl {
  font-size: min(0.6613756614vw, 10px);
  color: #FFF;
  display: flex; /* Safari */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media screen and (max-width: 820px) {
  #media .media_cnt .suppl {
    font-size: 10px;
  }
}
#media .media_cnt .suppl .tags a {
  text-decoration: none;
  color: #63BAEA;
  display: inline-block;
}
#media .media_cnt .suppl .update {
  font-weight: 700;
}

.entry-footer {
  display: inline-block;
  padding: min(1.3227513228vw, 20px);
  border-radius: 5px;
  background: #FFF;
  position: fixed;
  bottom: 10px;
  left: 10px;
  font-size: 12px;
  z-index: 9;
}/*# sourceMappingURL=sub.css.map */