@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  overflow-y: hidden;
  word-wrap: break-word;
  line-height: 1.8;
  letter-spacing: 0.2px;
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  color: #000000;
}
@media screen and (max-width: 768px) {
  body {
    width: 100%;
    overflow-y: initial;
    font-size: 1.5rem;
  }
}

h1, h2, h3, h4, h5, h6, h7 {
  font-weight: 400;
}

a {
  color: #000000;
  text-decoration: none;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

ol, ul, li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

table, tr, th, td {
  border-collapse: collapse;
  font-size: 100%;
  vertical-align: top;
  border-spacing: 0;
}

svg path {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

*:focus {
  outline: none;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
@media screen and (max-width: 768px) {
  .wrapper {
    display: block;
  }
}

.pc {
  display: block !important;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}

.sp {
  display: none !important;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block !important;
  }
}

/*-- ファイル読み込み --*/
.page-ttl h2, .section-pages .sec-ttl h3, header .header-sp .menu-ttl {
  line-height: 1;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .page-ttl h2, .section-pages .sec-ttl h3, header .header-sp .menu-ttl {
    font-size: 1.4rem;
  }
}
.page-ttl h2 span, .section-pages .sec-ttl h3 span, header .header-sp .menu-ttl span {
  padding-right: 40px;
  position: relative;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #00A9F7;
}
@media screen and (max-width: 768px) {
  .page-ttl h2 span, .section-pages .sec-ttl h3 span, header .header-sp .menu-ttl span {
    font-size: 1.6rem;
  }
}
.page-ttl h2 span::before, .section-pages .sec-ttl h3 span::before, header .header-sp .menu-ttl span::before {
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
  background: #000000;
}

.page-mv::before, .aboutus::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/bg-pat-a.jpg") repeat center/550px;
  -webkit-transition: 0.4s linear;
  transition: 0.4s linear;
  visibility: visible;
  z-index: 1;
}

.scroll-wrapper__bg, footer .footer-contact__bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.works-single .txt-block__content .works-cate, .works .work-list__item a .works-cate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: flex-stasrt;
      -ms-flex-pack: flex-stasrt;
          justify-content: flex-stasrt;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 8px 0;
}
.works-single .txt-block__content .works-cate li, .works .work-list__item a .works-cate li {
  position: relative;
  line-height: 1;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  color: #999999;
}
.works-single .txt-block__content .works-cate li:not(:last-child), .works .work-list__item a .works-cate li:not(:last-child) {
  padding-right: 25px;
}
@media screen and (max-width: 768px) {
  .works-single .txt-block__content .works-cate li:not(:last-child), .works .work-list__item a .works-cate li:not(:last-child) {
    padding-right: 16px;
  }
}
.works-single .txt-block__content .works-cate li:not(:last-child)::before, .works .work-list__item a .works-cate li:not(:last-child)::before {
  content: "/";
  position: absolute;
  right: 10px;
  font-size: 1.4rem;
  color: #999999;
}
@media screen and (max-width: 768px) {
  .works-single .txt-block__content .works-cate li:not(:last-child)::before, .works .work-list__item a .works-cate li:not(:last-child)::before {
    right: 5px;
  }
}

/*----------------------------------------------------
header
----------------------------------------------------*/
header {
  width: min(90%, 1320px);
  position: fixed;
  left: 60px;
  bottom: 60px;
  z-index: 99;
}
@media screen and (max-width: 768px) {
  header {
    width: auto;
    height: 0;
    top: 0;
    left: 0;
    bottom: auto;
  }
}
header .header-pc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: 100%;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
@media screen and (max-width: 768px) {
  header .header-pc {
    display: none;
  }
}
header .header-pc .h-logo {
  width: 210px;
  line-height: 1;
}
header .header-pc .h-logo a {
  display: block;
  width: 100%;
  height: 100%;
}
header .header-pc .h-logo a svg .logo-path {
  -webkit-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
  fill: #00A9F7;
}
header .header-pc .g-nav {
  width: min(64%, 580px);
}
header .header-pc .g-nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
header .header-pc .g-nav ul li a {
  position: relative;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: #000000;
}
header .header-pc .g-nav ul li a::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -14px;
  margin: auto;
  background: #00A9F7;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
header .header-pc .g-nav ul li a:hover::before {
  opacity: 1;
}
header .header-pc.top-header {
  visibility: hidden;
  opacity: 0;
}
header .header-pc.top-header.active {
  visibility: visible;
  opacity: 1;
}
header .header-pc.top-header.inversion .h-logo a svg .logo-path {
  fill: #ffffff;
}
header .header-pc.top-header.inversion .g-nav ul li a {
  color: #ffffff;
}
header .header-sp {
  display: none;
  width: 100vw;
  height: 100dvh;
  position: relative;
  background: #00A9F7;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
@media screen and (max-width: 768px) {
  header .header-sp {
    display: block;
  }
}
header .header-sp.open {
  opacity: 1;
  visibility: visible;
}
header .header-sp::before {
  content: "";
  width: 93%;
  aspect-ratio: 345/180;
  position: absolute;
  left: 0;
  bottom: 12%;
  background: url("../img/common/menu-bg.png") no-repeat center left/contain;
}
header .header-sp .trigger__top {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 40px;
  right: 30px;
}
header .header-sp .trigger__top___content {
  width: 100%;
  height: 100%;
  position: relative;
}
header .header-sp .trigger__top___content span {
  display: block;
  width: 16px;
  height: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #ffffff;
}
header .header-sp .trigger__top___content span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
header .header-sp .trigger__top___content span:nth-child(2) {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
header .header-sp .menu-ttl {
  position: absolute;
  top: 40px;
  left: 30px;
  color: #ffffff;
}
header .header-sp .menu-ttl span {
  color: #ffffff;
}
header .header-sp .menu-ttl span::before {
  background: #ffffff;
}
header .header-sp .g-nav {
  width: 60%;
  position: relative;
  top: 20%;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
header .header-sp .g-nav ul li {
  line-height: 1;
}
header .header-sp .g-nav ul li:not(:last-child) {
  margin-bottom: 50px;
}
header .header-sp .g-nav ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 1.8rem;
  color: #ffffff;
}
header .header-sp .g-nav ul li a::before {
  content: "";
  display: block;
  width: 74px;
  height: 2px;
  position: absolute;
  top: 0;
  right: 36px;
  bottom: 0;
  margin: auto;
  background: #ffffff;
}
header .header-sp .g-nav ul li a .arrow {
  display: inline-block;
  line-height: 1;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
header .header-sp .g-nav ul li a .arrow svg {
  width: 10px;
}
header .header-sp .g-nav ul li a .arrow svg .arrow-path {
  fill: #ffffff;
}
header .menu-fixed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: 85%;
  max-width: 1000px;
  margin: 0 auto 0px;
  position: fixed;
  right: 0;
  left: 0;
  bottom: 40px;
  margin: auto;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
}
header .menu-fixed .f-logo {
  width: 40%;
  line-height: 1;
}
header .menu-fixed .f-logo a {
  display: block;
  width: 100%;
  height: 100%;
}
header .menu-fixed .f-logo a svg .logo-path {
  fill: #00A9F7;
}
header .menu-fixed .trigger__fixed {
  width: 47px;
  height: 24px;
  border-radius: 14px;
  border: 1px solid #000000;
}
header .menu-fixed .trigger__fixed___content {
  width: 100%;
  height: 100%;
  position: relative;
}
header .menu-fixed .trigger__fixed___content span {
  display: block;
  width: 20px;
  height: 1px;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  background: #000000;
}
header .menu-fixed .trigger__fixed___content span:nth-child(1) {
  top: 8px;
}
header .menu-fixed .trigger__fixed___content span:nth-child(2) {
  bottom: 8px;
}
header .menu-fixed.active {
  visibility: visible;
  opacity: 1;
}
header .menu-fixed.open .f-logo a svg .logo-path {
  fill: #ffffff;
}
header .menu-fixed.open .trigger__fixed {
  border-color: #ffffff;
}
header .menu-fixed.open .trigger__fixed___content span {
  background: #ffffff;
  top: 0;
  bottom: 0;
  margin: auto;
}
header .menu-fixed.open .trigger__fixed___content span:nth-child(1) {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
header .menu-fixed.open .trigger__fixed___content span:nth-child(2) {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}

/*----------------------------------------------------
footer
----------------------------------------------------*/
@media screen and (max-width: 768px) {
  footer {
    position: relative;
  }
}
footer .footer-contact {
  height: 100vh;
  position: relative;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
@media screen and (max-width: 768px) {
  footer .footer-contact {
    height: auto;
  }
}
footer .footer-contact__bg {
  background-image: url("../img/common/bg-c_pc.jpg");
}
@media screen and (max-width: 768px) {
  footer .footer-contact__bg {
    background-image: url("../img/common/bg-c_sp.jpg");
  }
}

/*-- ファイル読み込み --*/
/*----------------------------------------------------
loading
----------------------------------------------------*/ /*----------------------------------------------------
backtop
----------------------------------------------------*/
.backtop {
  width: 70px;
  position: absolute;
  right: -28px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 97;
}
@media screen and (max-width: 768px) {
  .backtop {
    width: 53px;
    top: auto;
    right: auto;
    left: 50%;
    bottom: -48px;
    -webkit-transform: translateX(-50%) rotate(90deg);
        -ms-transform: translateX(-50%) rotate(90deg);
            transform: translateX(-50%) rotate(90deg);
  }
}
.backtop a {
  display: block;
}
.backtop a svg .top-arrow-path01 {
  fill: #ffffff;
  stroke: #000000;
}
.backtop a:hover svg .top-arrow-path01 {
  fill: #00A9F7;
}
@media screen and (max-width: 768px) {
  .backtop a:hover svg .top-arrow-path01 {
    fill: #ffffff;
  }
}

/*-------------------------------------
return-to-top
-------------------------------------*/
.return-to-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: min(96%, 1378px);
  position: fixed;
  top: 82px;
  z-index: 98;
}
@media screen and (max-width: 768px) {
  .return-to-top {
    width: 85%;
    right: 0;
    left: 0;
    margin: auto;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .return-to-top {
    top: 40px;
  }
}
.return-to-top a {
  line-height: 1;
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
}
.return-to-top a p {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .return-to-top a p {
    display: none;
  }
}
.return-to-top a .arrow {
  position: relative;
  padding-left: 54px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .return-to-top a .arrow {
    padding-left: 0;
  }
}
.return-to-top a .arrow::before {
  content: "";
  width: 24px;
  height: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .return-to-top a .arrow::before {
    right: 16px;
  }
}
.return-to-top a .arrow svg {
  vertical-align: text-top;
}
.return-to-top a .arrow.arrow::before {
  background: #000000;
}
.return-to-top a .arrow.arrow svg {
  width: 10px;
}
.return-to-top a .arrow.arrow svg .arrow-path {
  fill: #000000;
}
.return-to-top a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .return-to-top a:hover {
    opacity: 1;
  }
}
.return-to-top.fixed {
  width: auto;
  right: 4%;
}
@media screen and (max-width: 768px) {
  .return-to-top.fixed {
    width: 85%;
    right: 0;
    left: 0;
    margin: auto;
  }
}

/*-------------------------------------
動き関連
-------------------------------------*/
.fdin {
  opacity: 0;
  -webkit-transition: 0.4s ease-in;
  transition: 0.4s ease-in;
}
.fdin.active {
  opacity: 1;
}
.fdin__left {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  opacity: 0;
  -webkit-transition: 0.6s linear;
  transition: 0.6s linear;
}
.fdin__left.active {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
}

@-webkit-keyframes fdin {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fdin {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fdout {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes fdout {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@-webkit-keyframes fdin-top {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%) scale(0.8);
            transform: translateY(-100%) scale(0.8);
  }
}
@keyframes fdin-top {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%) scale(0.8);
            transform: translateY(-100%) scale(0.8);
  }
}
@-webkit-keyframes in-bottom {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes in-bottom {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes load-circle {
  0%, 80%, 100% {
    -webkit-box-shadow: 0 2.5em 0 -1.3em;
            box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    -webkit-box-shadow: 0 2.5em 0 0;
            box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load-circle {
  0%, 80%, 100% {
    -webkit-box-shadow: 0 2.5em 0 -1.3em;
            box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    -webkit-box-shadow: 0 2.5em 0 0;
            box-shadow: 0 2.5em 0 0;
  }
}
@-webkit-keyframes line_move {
  0% {
    fill: rgba(255, 255, 255, 0);
    stroke-dashoffset: 653px;
    opacity: 1;
  }
  34%, 94% {
    fill: rgba(255, 255, 255, 0.5);
    stroke-dashoffset: 0;
    opacity: 1;
  }
  97%, 100% {
    fill: rgba(255, 255, 255, 0);
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes line_move {
  0% {
    fill: rgba(255, 255, 255, 0);
    stroke-dashoffset: 653px;
    opacity: 1;
  }
  34%, 94% {
    fill: rgba(255, 255, 255, 0.5);
    stroke-dashoffset: 0;
    opacity: 1;
  }
  97%, 100% {
    fill: rgba(255, 255, 255, 0);
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes arrow_move {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes arrow_move {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes scroll-arrow {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scroll-arrow {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes scroll-line {
  0% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  50% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  51% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
  100% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
}
@keyframes scroll-line {
  0% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  50% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  51% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
  100% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
}
@-webkit-keyframes wavy {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
    stroke-width: 1;
  }
  50% {
    -webkit-transform: translateX(-5em);
            transform: translateX(-5em);
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
    stroke-width: 1.5;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
    stroke-width: 1;
  }
}
@keyframes wavy {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
    stroke-width: 1;
  }
  50% {
    -webkit-transform: translateX(-5em);
            transform: translateX(-5em);
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
    stroke-width: 1.5;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
    stroke-width: 1;
  }
}
/*-- ファイル読み込み --*/
/*----------------------------------------------------
scroll-wrapper
----------------------------------------------------*/
.scroll-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .scroll-wrapper {
    height: auto;
    display: block;
  }
}
.scroll-wrapper__bg {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  z-index: -1;
}
.scroll-wrapper .scroller {
  position: relative;
}

/*----------------------------------------------------
obj-container
----------------------------------------------------*/
.obj-container {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .obj-container {
    top: 0;
    left: 0;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

/*----------------------------------------------------
sec-ttl
----------------------------------------------------*/
.section-pages {
  width: 100%;
  position: fixed;
  top: 60px;
  left: 60px;
  z-index: 98;
}
@media screen and (max-width: 768px) {
  .section-pages {
    width: auto;
    position: static;
  }
}
.section-pages.sp {
  display: contents !important;
}
.section-pages .sec-ttl {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 98;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
@media screen and (max-width: 768px) {
  .section-pages .sec-ttl {
    top: 40px;
    left: 30px;
    opacity: 1;
  }
}
.section-pages .sec-ttl__05 h3 {
  color: #ffffff;
}
.section-pages .sec-ttl__05 h3 span {
  color: #ffffff;
}
.section-pages .sec-ttl__05 h3 span::before {
  background: #ffffff;
}
.section-pages .sec-ttl.before {
  -webkit-transform: translateY(-100%) scale(0.8);
      -ms-transform: translateY(-100%) scale(0.8);
          transform: translateY(-100%) scale(0.8);
}
.section-pages .sec-ttl.current {
  opacity: 1;
}
.section-pages .sec-ttl.after {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}

/*----------------------------------------------------
parts
----------------------------------------------------*/
.parts {
  display: block;
  position: absolute;
  line-height: 1;
  z-index: 1;
}

/*----------------------------------------------------
page-mv
----------------------------------------------------*/
.page-mv {
  position: relative;
  background: #ffffff;
  overflow-y: hidden;
}
@media screen and (max-width: 768px) {
  .page-mv {
    max-width: 100%;
    width: 100%;
    padding-bottom: 140px;
  }
}
.page-mv.hidden::before {
  visibility: hidden;
  opacity: 0;
}
.page-mv__content {
  position: relative;
  max-width: 1500px;
  width: 1500px;
  height: 100%;
  margin-right: 660px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .page-mv__content {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 375/812;
    margin-right: 0;
  }
}
.page-mv__content::before {
  content: "";
  height: 91%;
  aspect-ratio: 3102/1888;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: url("../img/top/page-mv-bg_pc.png") no-repeat center left/contain;
  opacity: 0;
  -webkit-animation: fdin 0.6s ease-in forwards;
          animation: fdin 0.6s ease-in forwards;
}
@media screen and (max-width: 768px) {
  .page-mv__content::before {
    width: 100%;
    aspect-ratio: 750/1382;
    top: 48%;
    background-image: url("../img/top/page-mv-bg_sp.png");
  }
}
.page-mv__content .eyecatch {
  position: absolute;
  top: 46%;
  left: 230px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .page-mv__content .eyecatch {
    width: 80%;
    left: 10%;
  }
}
.page-mv__content .eyecatch .logo {
  width: 26.5vh;
  aspect-ratio: 263/46;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .page-mv__content .eyecatch .logo {
    width: 53%;
    height: auto;
    margin-bottom: 30px;
  }
}
.page-mv__content .eyecatch .catch {
  height: 14.3vh;
  aspect-ratio: 548/153;
}
@media screen and (max-width: 768px) {
  .page-mv__content .eyecatch .catch {
    width: 100%;
    height: auto;
  }
}
.page-mv__content .eyecatch .catch span {
  display: block;
  overflow: hidden;
}
.page-mv__content .eyecatch .catch span.catch-a {
  width: 100%;
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .page-mv__content .eyecatch .catch span.catch-a {
    margin-bottom: 12px;
  }
}
.page-mv__content .eyecatch .catch span.catch-b {
  width: 53%;
}
.page-mv__content .eyecatch .catch span img {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}
.page-mv__content .eyecatch .catch.loaded span.catch-a img {
  -webkit-animation: in-bottom 0.4s linear forwards;
          animation: in-bottom 0.4s linear forwards;
}
.page-mv__content .eyecatch .catch.loaded span.catch-b img {
  -webkit-animation: in-bottom 0.4s 0.4s linear forwards;
          animation: in-bottom 0.4s 0.4s linear forwards;
}
.page-mv__content .news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: 370px;
  position: absolute;
  top: 80px;
  right: 120px;
}
@media screen and (max-width: 768px) {
  .page-mv__content .news {
    width: 85%;
    top: auto;
    right: 0;
    left: 0;
    bottom: 70px;
    margin: auto;
  }
}
.page-mv__content .news__content {
  width: 280px;
  padding: 20px;
  background: #ffffff;
  border-radius: 14px 14px 0 14px;
  border: 1px solid #000000;
}
@media screen and (max-width: 768px) {
  .page-mv__content .news__content {
    width: 80%;
    padding: 15px 20px;
  }
}
.page-mv__content .news__content .txt {
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .page-mv__content .news__content .txt {
    font-size: 1.2rem;
  }
}
.page-mv__content .news__content .date {
  font-size: 1.4rem;
  color: #00A9F7;
}
@media screen and (max-width: 768px) {
  .page-mv__content .news__content .date {
    font-size: 1rem;
  }
}
.page-mv__content .news .news-icon {
  width: 60px;
}
@media screen and (max-width: 768px) {
  .page-mv__content .news .news-icon {
    width: 46px;
  }
}
.page-mv .sc-topbtn {
  width: 230px;
  position: absolute;
  right: 780px;
  bottom: 60px;
  z-index: 2;
}
.page-mv .sc-topbtn a {
  display: block;
}
.page-mv .sc-topbtn a svg .top-arrow-path01,
.page-mv .sc-topbtn a svg .top-arrow-path02 {
  fill: rgba(0, 169, 247, 0);
  stroke: #000000;
}
.page-mv .sc-topbtn a:hover svg .top-arrow-path01,
.page-mv .sc-topbtn a:hover svg .top-arrow-path02 {
  fill: #00A9F7;
}
@media screen and (max-width: 768px) {
  .page-mv .sc-topbtn a:hover svg .top-arrow-path01,
  .page-mv .sc-topbtn a:hover svg .top-arrow-path02 {
    fill: rgba(0, 169, 247, 0);
    stroke: #000000;
  }
}
.page-mv .copylight {
  position: absolute;
  left: 60px;
  bottom: 30px;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .page-mv .copylight {
    right: 0;
    left: 0;
    bottom: 180px;
    margin: auto;
    text-align: center;
    font-size: 1rem;
  }
}

/*----------------------------------------------------
aboutus
----------------------------------------------------*/
.aboutus {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-right: 656px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .aboutus {
    display: block;
    padding: 0 0 500px 0;
    overflow-x: hidden;
  }
}
.aboutus.hidden::before {
  visibility: hidden;
  opacity: 0;
}
.aboutus__block {
  max-width: 1440px;
  width: 1440px;
  height: 100%;
  position: relative;
  background: #ffffff;
}
@media screen and (max-width: 768px) {
  .aboutus__block {
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .aboutus__block___01 {
    padding: 110px 0 60px;
  }
}
.aboutus__block___01 .aboutus-catch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .aboutus__block___01 .aboutus-catch {
    margin-bottom: 64px;
  }
}
.aboutus__block___01 .aboutus-catch h4 {
  position: relative;
  line-height: 1.6;
  font-weight: 700;
  font-size: 3.2rem;
}
@media screen and (max-width: 768px) {
  .aboutus__block___01 .aboutus-catch h4 {
    text-align: center;
    font-size: 2.4rem;
  }
}
.aboutus__block___01 .aboutus-catch h4::before, .aboutus__block___01 .aboutus-catch h4::after {
  content: "";
  display: block;
  width: 32px;
  aspect-ratio: 32/30;
  position: absolute;
  background: url("../img/top/comma.svg") no-repeat center/contain;
}
@media screen and (max-width: 768px) {
  .aboutus__block___01 .aboutus-catch h4::before, .aboutus__block___01 .aboutus-catch h4::after {
    width: 20px;
  }
}
.aboutus__block___01 .aboutus-catch h4::before {
  top: 0;
  left: -62px;
}
@media screen and (max-width: 768px) {
  .aboutus__block___01 .aboutus-catch h4::before {
    left: -33px;
  }
}
.aboutus__block___01 .aboutus-catch h4::after {
  right: -42px;
  bottom: 0;
  -webkit-transform: scale(-1, -1);
      -ms-transform: scale(-1, -1);
          transform: scale(-1, -1);
}
@media screen and (max-width: 768px) {
  .aboutus__block___01 .aboutus-catch h4::after {
    right: -32px;
  }
}
.aboutus__block___01 .parts {
  z-index: 2;
}
.aboutus__block___01 .parts__illust01 {
  width: 301px;
  top: 150px;
  right: 64px;
}
@media screen and (max-width: 768px) {
  .aboutus__block___01 .parts__illust01 {
    width: 47.5%;
    position: relative;
    margin: 0 7.5% 16px auto;
    top: auto;
    right: auto;
  }
}
.aboutus__block___01 .parts__illust02 {
  width: 276px;
  left: 150px;
  bottom: 172px;
}
@media screen and (max-width: 768px) {
  .aboutus__block___01 .parts__illust02 {
    width: 43.6%;
    position: relative;
    margin-left: 7.5%;
    left: auto;
    bottom: auto;
  }
}
.aboutus__block___01 .parts__line01 {
  width: 376px;
  right: 186px;
  bottom: 20.76%;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .aboutus__block___01 .parts__line01 {
    width: 48.8%;
    right: -6%;
    bottom: 19%;
  }
}
@media screen and (max-width: 768px) {
  .aboutus__block___02 {
    padding: 110px 0 154px;
  }
}
.aboutus__block___02 p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  letter-spacing: 0.4px;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .aboutus__block___02 p {
    display: block;
    width: 85%;
    max-width: 1000px;
    margin: 0 auto 62px;
    font-size: 1.5rem;
  }
}
.aboutus__block___02 .parts {
  z-index: 2;
}
.aboutus__block___02 .parts__illust03 {
  width: 445px;
  top: 144px;
  right: -44px;
}
@media screen and (max-width: 768px) {
  .aboutus__block___02 .parts__illust03 {
    width: 69.8%;
    position: relative;
    margin: 0 0 46px auto;
    top: auto;
    right: auto;
  }
}
.aboutus__block___02 .parts__illust04 {
  width: 327px;
  left: 50px;
  bottom: 172px;
}
@media screen and (max-width: 768px) {
  .aboutus__block___02 .parts__illust04 {
    width: 60%;
    position: relative;
    margin-left: 7.5%;
    left: auto;
    bottom: auto;
  }
}
.aboutus__block___02 .parts__line02 {
  width: 270px;
  right: 100px;
  bottom: 20.76%;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .aboutus__block___02 .parts__line02 {
    width: 37.5%;
    right: 1%;
    bottom: 27%;
  }
}
.aboutus__block___03 {
  max-width: 1170px;
  width: 1170px;
}
@media screen and (max-width: 768px) {
  .aboutus__block___03 {
    max-width: 100%;
    width: 100%;
    padding: 60px 0 174px;
  }
}
.aboutus__block___03 h4 {
  margin-bottom: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .aboutus__block___03 h4 {
    font-size: 1.8rem;
  }
}
.aboutus__block___03 .business-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 870px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .aboutus__block___03 .business-list {
    display: block;
    width: 85%;
    max-width: 1000px;
    margin: 0 auto 0px;
  }
}
.aboutus__block___03 .business-list__item {
  width: min(28.8%, 250px);
}
@media screen and (max-width: 768px) {
  .aboutus__block___03 .business-list__item {
    width: 100%;
  }
  .aboutus__block___03 .business-list__item:not(:last-child) {
    margin-bottom: 60px;
  }
}
.aboutus__block___03 .business-list__item .business-img {
  width: min(64%, 160px);
  aspect-ratio: 160/118;
  margin: 0 auto 30px;
}
@media screen and (max-width: 768px) {
  .aboutus__block___03 .business-list__item .business-img {
    width: min(160px, 48.4%);
  }
}
.aboutus__block___03 .business-list__item .name {
  margin-bottom: 20px;
  line-height: 1;
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
}
.aboutus__block___03 .business-list__item .name span {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: #999999;
}
@media screen and (max-width: 768px) {
  .aboutus__block___03 .business-list__item .txt {
    font-size: 1.6rem;
  }
}

/*----------------------------------------------------
works
----------------------------------------------------*/
.works {
  padding-right: 720px;
}
@media screen and (max-width: 768px) {
  .works {
    padding: 0 0 500px 0;
  }
}
.works__block {
  max-width: 1620px;
  width: 1620px;
  height: 100%;
  background: #ffffff;
}
@media screen and (max-width: 768px) {
  .works__block {
    max-width: 100%;
    width: 100%;
    padding: 136px 0 130px;
  }
}
.works .work-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .works .work-list {
    display: block;
    width: 85%;
    max-width: 1000px;
    margin: 0 auto 0px;
  }
}
.works .work-list__item {
  width: min(30%, 360px);
  height: 476px;
}
@media screen and (max-width: 768px) {
  .works .work-list__item {
    width: 100%;
    height: auto;
  }
  .works .work-list__item:not(:last-child) {
    margin-bottom: 80px;
  }
}
.works .work-list__item a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .works .work-list__item a {
    padding-bottom: 24px;
  }
}
.works .work-list__item a.no-cursor {
  pointer-events: none;
}
.works .work-list__item a .thumbnail {
  aspect-ratio: 400/300;
  margin-bottom: 40px;
  border-radius: 14px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .works .work-list__item a .thumbnail {
    margin-bottom: 30px;
  }
}
.works .work-list__item a .thumbnail img {
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.works .work-list__item a .name {
  line-height: 1.6;
  font-weight: 700;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .works .work-list__item a .name {
    font-size: 2rem;
  }
}
.works .work-list__item a .client {
  font-weight: 700;
}
.works .work-list__item a .works-cate {
  margin-top: 14px;
}
.works .work-list__item a .works-btn {
  position: absolute;
  left: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .works .work-list__item a .works-btn {
    margin-top: 20px;
    position: static;
  }
}
.works .work-list__item a .works-btn.read-more p {
  color: #00A9F7;
}
.works .work-list__item a .works-btn.coming-soon p {
  color: #cccccc;
}
.works .work-list__item a .works-btn span {
  position: relative;
  padding-left: 84px;
  line-height: 1;
}
.works .work-list__item a .works-btn span::before {
  content: "";
  width: 74px;
  height: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.works .work-list__item a .works-btn span svg {
  vertical-align: text-top;
}
.works .work-list__item a .works-btn span.arrow {
  display: block;
  margin-bottom: 10px;
}
.works .work-list__item a .works-btn span.arrow::before {
  background: #00A9F7;
}
.works .work-list__item a .works-btn span.arrow svg {
  width: 10px;
}
.works .work-list__item a .works-btn span.arrow svg .arrow-path {
  fill: #00A9F7;
}
.works .work-list__item a .works-btn span.multiply::before {
  background: #cccccc;
}
.works .work-list__item a .works-btn span.multiply svg {
  width: 16px;
}
.works .work-list__item a .works-btn span.multiply svg .multiply-path {
  fill: #cccccc;
}
.works .work-list__item a .works-btn p {
  line-height: 1;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  color: #00A9F7;
}
@media screen and (max-width: 768px) {
  .works .work-list__item a .works-btn p {
    font-size: 1.6rem;
  }
}
.works .work-list__item a .mark {
  position: absolute;
  right: 0;
  bottom: 0;
}
.works .work-list__item a:hover .thumbnail img {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}
@media screen and (max-width: 768px) {
  .works .work-list__item a:hover .thumbnail img {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
}
.works .work-list__item:first-child a .mark {
  width: 66px;
  aspect-ratio: 66/66;
  background: url("../img/top/mark-a.png") no-repeat center/contain;
}
.works .work-list__item:nth-child(2) a .mark {
  width: 90px;
  aspect-ratio: 90/66;
  background: url("../img/top/mark-b.png") no-repeat center/contain;
}
.works .work-list__item:last-child a .mark {
  width: 66px;
  aspect-ratio: 66/66;
  background: url("../img/top/mark-c.png") no-repeat center/contain;
}

/*----------------------------------------------------
oveview
----------------------------------------------------*/
.overview {
  padding-right: 720px;
}
@media screen and (max-width: 768px) {
  .overview {
    padding: 0 0 500px 0;
  }
}
.overview__block {
  max-width: 1440px;
  width: 1440px;
  height: 100%;
  background: #ffffff;
}
@media screen and (max-width: 768px) {
  .overview__block {
    max-width: 100%;
    width: 100%;
    padding: 136px 0 144px;
  }
}
.overview .company {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 1040px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .overview .company {
    display: block;
    width: 85%;
    max-width: 1000px;
    margin: 0 auto 0px;
  }
}
.overview .company__profile {
  width: 605px;
  border-top: 1px solid #cccccc;
}
@media screen and (max-width: 768px) {
  .overview .company__profile {
    width: 100%;
    margin-bottom: 20px;
  }
}
.overview .company__profile tr {
  width: 100%;
  padding: 30px 0;
  border-bottom: 1px solid #cccccc;
  text-align: left;
}
.overview .company__profile tr th, .overview .company__profile tr td {
  padding: 26px 0;
}
@media screen and (max-width: 768px) {
  .overview .company__profile tr th, .overview .company__profile tr td {
    font-size: 1.3rem;
  }
}
.overview .company__profile tr th {
  width: 15%;
  vertical-align: middle;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .overview .company__profile tr th {
    width: 22%;
  }
}
.overview .company__profile tr td {
  width: 85%;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .overview .company__profile tr td {
    width: 78%;
  }
}
.overview .company__maps {
  width: 355px;
}
@media screen and (max-width: 768px) {
  .overview .company__maps {
    width: 100%;
  }
}
.overview .company__maps .maps {
  height: 334px;
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .overview .company__maps .maps {
    height: 160px;
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 768px) {
  .overview .company .access {
    font-size: 1.3rem;
  }
}

/*----------------------------------------------------
contact
----------------------------------------------------*/
.contact__block {
  max-width: 1440px;
  width: 1440px;
  height: 100%;
  position: relative;
  background: rgba(255, 255, 255, 0.75);
}
@media screen and (max-width: 768px) {
  .contact__block {
    max-width: 100%;
    width: 100%;
    padding: 286px 0 160px;
  }
}
.contact .txt {
  margin-bottom: 30px;
  text-align: center;
  letter-spacing: 0.4px;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .contact .txt {
    font-size: 1.5rem;
  }
}
.contact .contact-btn {
  width: 276px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .contact .contact-btn {
    width: 242px;
    margin-bottom: 140px;
  }
}
.contact .contact-btn a {
  display: block;
  padding: 30px 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #00A9F7;
  line-height: 1;
  text-align: center;
  font-weight: 500;
  color: #00A9F7;
}
@media screen and (max-width: 768px) {
  .contact .contact-btn a {
    padding: 28px 0;
    font-size: 1.3rem;
  }
}
.contact .contact-btn a .mail-icon {
  display: inline-block;
  width: 16px;
  margin-left: 20px;
  line-height: 1;
}
.contact .contact-btn a .mail-icon svg .mail-path {
  fill: #00A9F7;
}
.contact .contact-btn a:hover {
  background: #00A9F7;
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  .contact .contact-btn a:hover {
    background: #ffffff;
    color: #00A9F7;
  }
}
.contact .contact-btn a:hover .mail-icon svg .mail-path {
  fill: #ffffff;
}
@media screen and (max-width: 768px) {
  .contact .contact-btn a:hover .mail-icon svg .mail-path {
    fill: #00A9F7;
  }
}
.contact .sns {
  width: 282px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px 30px;
  position: absolute;
  right: 60px;
  bottom: 180px;
  border-radius: 35px;
  border: 1px solid #000000;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .contact .sns {
    width: 215px;
    padding: 15px 30px;
    position: static;
    margin: 0 auto;
  }
}
.contact .sns .follow-me {
  margin-right: 30px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .contact .sns .follow-me {
    margin-right: 20px;
    font-size: 1.2rem;
  }
}
.contact .sns ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.contact .sns ul li {
  position: relative;
}
.contact .sns ul li:not(:first-child) {
  padding-left: 61px;
}
@media screen and (max-width: 768px) {
  .contact .sns ul li:not(:first-child) {
    padding-left: 41px;
  }
}
.contact .sns ul li:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 30px;
  bottom: 0;
  margin: auto;
  background: #808080;
}
@media screen and (max-width: 768px) {
  .contact .sns ul li:not(:first-child)::before {
    height: 20px;
    left: 20px;
  }
}
.contact .sns ul li.insta svg {
  width: 30px;
}
@media screen and (max-width: 768px) {
  .contact .sns ul li.insta svg {
    width: 20px;
  }
}
.contact .sns ul li.insta svg .insta-path {
  fill: rgba(0, 0, 0, 0.6);
}
.contact .sns ul li.x svg {
  width: 29px;
}
@media screen and (max-width: 768px) {
  .contact .sns ul li.x svg {
    width: 19px;
  }
}
.contact .sns ul li.x svg .insta-path {
  fill: #000000;
}
.contact .sns ul li a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .contact .sns ul li a:hover {
    opacity: 1;
  }
}
.contact .parts__contact {
  width: 188px;
  right: 105px;
  bottom: 240px;
}
@media screen and (max-width: 768px) {
  .contact .parts__contact {
    width: 32.1%;
    right: 0;
    left: 0;
    bottom: 25%;
    margin: auto;
  }
}

/*----------------------------------------------------
hotel
----------------------------------------------------*/
.scroll-under {
  max-width: 1440px;
  width: 100vw;
  height: 100vh;
  padding-right: 110px;
  position: sticky;
  top: 0;
  right: 0;
  background: url("../img/common/bg-pat-a.jpg") repeat center/550px #ffffff;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .scroll-under {
    width: 100vw;
    height: 100dvh;
    padding: 0 0 70px;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
  }
}

.hotel {
  width: 100%;
  height: 100%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .hotel {
    min-width: 100%;
    width: 100%;
    height: auto;
  }
}
.hotel .section-pages {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .hotel .section-pages {
    display: contents;
  }
}
.hotel .section-pages .sec-ttl {
  opacity: 1;
}
.hotel__block {
  height: 100%;
  position: relative;
  -webkit-transition: 0.6s linear;
  transition: 0.6s linear;
}
@media screen and (max-width: 768px) {
  .hotel__block {
    padding: 156px 0 88px;
  }
}
.hotel__block.scroll {
  opacity: 1;
}
.hotel__block .bg-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.hotel__block::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.45);
}
.hotel__block___content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: min(90%, 855px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .hotel__block___content {
    width: 85%;
    max-width: 1000px;
    margin: 0 auto 0px;
  }
}
.hotel__block___content____list {
  width: min(29.3%, 250px);
  border-top: 1px solid #ffffff;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  .hotel__block___content____list {
    width: 100%;
    border-top: none;
  }
}
.hotel__block___content____list_____item {
  padding: 30px 0;
  border-bottom: 1px solid #ffffff;
}
@media screen and (max-width: 768px) {
  .hotel__block___content____list_____item {
    padding: 20px 0;
  }
}
.hotel__block___content____list_____item h4 {
  margin-bottom: 30px;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .hotel__block___content____list_____item h4 {
    margin-bottom: 20px;
    font-size: 1.2rem;
  }
}
.hotel__block___content____list_____item a {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  color: #ffffff;
}
.hotel__block___content____list_____item a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .hotel__block___content____list_____item a:hover {
    opacity: 1;
  }
}
.hotel__block___content____list_____item p {
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .hotel__block___content____list_____item p {
    font-size: 1.3rem;
  }
}
.hotel__block___content____list_____item p .icon {
  display: inline-block;
  line-height: 1;
}
.hotel__block___content____list .hotel-access p {
  line-height: 1.8;
}
.hotel__block___content____list .hotel-access a {
  text-decoration: underline;
}
.hotel__block___content____list .hotel-sns-list {
  padding-bottom: 88px;
}
@media screen and (max-width: 768px) {
  .hotel__block___content____list .hotel-sns-list {
    padding-bottom: 20px;
  }
}
.hotel__block___content____list .hotel-sns-list p .icon {
  width: 20px;
  margin-right: 10px;
  vertical-align: baseline;
}
@media screen and (max-width: 768px) {
  .hotel__block___content____list .hotel-sns-list p .icon {
    width: 14px;
  }
}
.hotel__block___content____list .hotel-website p .icon {
  width: 16px;
  margin-left: 10px;
  vertical-align: text-top;
}
@media screen and (max-width: 768px) {
  .hotel__block___content____list .hotel-website p .icon {
    width: 12px;
  }
}
@media screen and (max-width: 768px) {
  .hotel__block___content____list:first-child {
    border-top: 1px solid #ffffff;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@media screen and (max-width: 768px) {
  .hotel__block___content____list:last-child {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.hotel__block___content .tayura-logo {
  width: 74px;
}
@media screen and (max-width: 768px) {
  .hotel__block___content .tayura-logo {
    width: 30px;
    margin: 0 auto 40px;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
}

/*----------------------------------------------------
page-ttl
----------------------------------------------------*/
.page-ttl {
  position: fixed;
  top: 80px;
  left: 60px;
  z-index: 98;
}
@media screen and (max-width: 768px) {
  .page-ttl {
    top: 40px;
    left: 7.5%;
  }
}
/*----------------------------------------------------
works-single
----------------------------------------------------*/
.works-single {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .works-single {
    display: block;
    padding: 136px 0 80px;
  }
}
.works-single__01 .txt-block::before {
  width: 250px;
  aspect-ratio: 250/250;
  bottom: 0;
  background: url("../img/page/mark-bg-c.png");
}
@media screen and (max-width: 768px) {
  .works-single__01 .txt-block::before {
    width: 70px;
  }
}
.works-single__02 .txt-block::before {
  width: 350px;
  aspect-ratio: 350/257;
  bottom: 0;
  background: url("../img/page/mark-bg-b.png");
}
@media screen and (max-width: 768px) {
  .works-single__02 .txt-block::before {
    width: 95px;
  }
}
.works-single__03 .txt-block::before {
  width: 250px;
  aspect-ratio: 250/250;
  bottom: 0;
  background: url("../img/page/mark-bg-a.png");
}
@media screen and (max-width: 768px) {
  .works-single__03 .txt-block::before {
    width: 70px;
  }
}
.works-single .txt-block {
  width: 1040px;
  height: min(100%, 600px);
  position: relative;
}
@media screen and (max-width: 768px) {
  .works-single .txt-block {
    width: 85%;
    max-width: 1000px;
    margin: 0 auto 0px;
    height: auto;
    padding-bottom: 100px;
  }
}
.works-single .txt-block::before {
  content: "";
  display: block;
  position: absolute;
  right: -7.5%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .works-single .txt-block::before {
    right: 0;
    bottom: 20px;
  }
}
.works-single .txt-block__content {
  width: 650px;
  margin-left: 60px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .works-single .txt-block__content {
    width: 100%;
    margin: 0;
    position: static;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
}
.works-single .txt-block__content .name {
  line-height: 1.6;
  font-weight: 700;
  font-size: 3.2rem;
}
@media screen and (max-width: 768px) {
  .works-single .txt-block__content .name {
    font-size: 2rem;
  }
}
.works-single .txt-block__content .client {
  font-weight: 700;
  font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
  .works-single .txt-block__content .client {
    font-size: 1.5rem;
  }
}
.works-single .txt-block__content .works-cate {
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .works-single .txt-block__content .works-cate {
    margin-top: 14px;
  }
}
.works-single .txt-block__content .works-cate li {
  font-size: 1.4rem;
}
.works-single .txt-block__content .txt {
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .works-single .txt-block__content .txt {
    font-size: 1.2rem;
  }
}
.works-single .txt-block__content .link {
  margin-top: 20px;
  line-height: 1.4;
}
.works-single .txt-block__content .link a {
  text-decoration: underline;
  color: #00A9F7;
}
@media screen and (max-width: 768px) {
  .works-single .txt-block__content .link a {
    font-size: 1.2rem;
  }
}
.works-single .txt-block__content .link a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .works-single .txt-block__content .link a:hover {
    opacity: 1;
  }
}
.works-single .img-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 40px;
  height: min(100%, 600px);
  margin-right: 200px;
}
@media screen and (max-width: 768px) {
  .works-single .img-block {
    display: block;
    width: 85%;
    max-width: 1000px;
    margin: 0 auto 0px;
    height: auto;
  }
}
.works-single .img-block .image {
  width: 900px;
  aspect-ratio: 900/600;
  border-radius: 20px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .works-single .img-block .image {
    width: 100%;
    border-radius: 10px;
  }
}
.works-single .img-block .image:not(:last-child) {
  margin-bottom: 20px;
}
.works-single .img-block .image img {
  -o-object-fit: cover;
     object-fit: cover;
}

/*----------------------------------------------------
not-found
----------------------------------------------------*/
.not-found {
  width: 100vw;
  height: 100vh;
}
@media screen and (max-width: 768px) {
  .not-found {
    height: 100dvh;
  }
}
.not-found .obj-container {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}
.not-found__content h2 {
  width: 450px;
  margin: 0 auto 40px;
}
@media screen and (max-width: 768px) {
  .not-found__content h2 {
    width: min(72%, 280px);
    margin-bottom: 60px;
  }
}
.not-found__content p {
  line-height: 1;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
}
@media screen and (max-width: 768px) {
  .not-found__content p {
    font-size: 2.2rem;
  }
}

/*----------------------------------------------------
notfound
----------------------------------------------------*/
/*-- ファイル読み込み --*/ /*-- ファイル読み込み --*/