@import url(fs.css);

/*
global > font-face
------------------------------
*/
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../font/NotoSansJP-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../font/Inter-Bold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}

/*
global > color
------------------------------
*/
:root {
  --color-bg-base: #fff;
  --color-bg-sub: #F2F8F9;
  --color-font-base: #3c3c3c;
  --color-font-black: #0E0E0E;
  --color-font-white: #fff;
  --color-font-lblue: #B9D3EE;
  --color-main: #156BC7;
  --color-accent: #D2161B;
  --color-accent-sub: #0E0E0E;
  --color-border: #B2CCE8;
  --color-list-hover: #afb3b4;
  --color-required: #ff0008;
  --color-placeholder: #C1C1C1;
}

/*!
global > content-width
------------------------------
*/
:root {
  --width-content: 1200px;
  --width-content-s: 900px;
}

/*
global > font
------------------------------
*/
:root {
  --font-family-base: "Noto Sans JP", sans-serif;
  --font-family-en: "Inter", sans-serif;
}

/*
foundation
------------------------------
*/
html {
  background-color: var(--color-bg-base);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  color: var(--color-font-base);
  font-size: var(--fs16);
  font-family: var(--font-family-base);
  line-height: 1.5;
  overflow-x: hidden;
}

@media screen and (max-width: 767px) {
  body {
    font-size: var(--fs15);
  }
}

/*
utility
------------------------------
*/
.u-sp-show {
  display: none;
}

@media screen and (max-width: 767px) {
  .u-sp-show {
    display: block;
  }
}

.u-tb-show {
  display: none;
}

@media screen and (max-width: 1000px) {
  .u-tb-show {
    display: block;
  }
}

.u-pc-show {
  display: block;
}

@media screen and (max-width: 1000px) {
  .u-pc-show {
    display: none;
  }
}

/*!
layout > container
------------------------------
*/
.l-container, .l-container-s {
  width: 90%;
  margin: 0 auto;
}

.l-container-s {
  max-width: var(--width-content-s);
}

.l-container {
  max-width: var(--width-content);
}

/*!
layout > section
------------------------------
*/
.l-section:not(.c-local-nav):not(.c-cta):not(.news-detail):not(.error):before {
  content: '';
  display: block;
  padding-top: 120px;
  margin-top: -120px;
}

@media screen and (max-width: 767px) {
  .l-section:not(.c-local-nav):not(.c-cta):not(.news-detail):not(.error):before {
    padding-top: 80px;
    margin-top: -80px;
  }
}

.l-section-privacy {
  padding-top: 80px;
}

/*!
layout > header
------------------------------
*/
.header {
  align-items: center;
  background-color: var(--color-bg-base);
  box-shadow: 0px 0px 12px #00000040;
  display: flex;
  height: 80px;
  justify-content: space-between;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .header {
    height: 72px;
  }
}

.header-list {
  display: flex;
}

@media screen and (max-width: 1000px) {
  .header-list {
    align-items: start;
    background-color: var(--color-bg-base);
    flex-direction: column;
    height: 100vh;
    max-width: 350px;
    position: absolute;
    right: 0;
    top: 63px;
    transform: translateX(100%);
    transition: all .5s ease-in-out;
    width: 100%;
  }
}

.header-logo {
  padding-left: 54px;
}

@media screen and (max-width: 767px) {
  .header-logo {
    padding-left: 20px;
  }
}

.header-logo-img {
  display: block;
  width: 170px;
}

@media screen and (max-width: 767px) {
  .header-logo-img {
    width: 150px;
  }
}

.header-item {
  color: var(--color-font-base);
  line-height: 80px;
  padding: 0 32px;
  position: relative;
}

@media screen and (max-width: 1000px) {
  .header-item {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    width: 70%;
  }
}

.header-item.--last {
  padding-right: 16px;
}

.header-item a {
  display: block;
  transition: color .3s;
}

@media(hover: hover) {
  .header-item:not(.header-item.--contact) a:hover {
    color: var(--color-main);
  }
}

.header-item:not(.header-item.--contact)::before {
  background: var(--color-main);
  content: "";
  display: block;
  height: 24px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) skewX(155deg);
  width: 1px;
}

@media screen and (max-width: 1000px) {
  .header-item:not(.header-item.--contact)::before {
    left: 30%;
  }
}

.header-item.--contact {
  color: var(--color-bg-base);
  position: relative;
  padding: 0 24px;
}

@media screen and (max-width: 1000px) {
  .header-item.--contact {
    background: var(--color-accent);
    height: 64px;
    line-height: 64px;
    margin-top: 16px;
  }
}

.header-item.--contact a {
  padding-left: 40px;
  padding-right: 24px;
}

.header-item.--contact::before {
  background: var(--color-accent);
  content: '';
  height: 100%;
  position: absolute;
  right: 0;
  transform-origin: bottom right;
  transform: skewX(-25deg);
  transition: background .3s;
  top: 0;
  width: 208px;
  z-index: -1;
}

@media(hover: hover) {
  .header-item.--contact:hover::before {
    background: var(--color-accent-sub);
  }
}

@media screen and (max-width: 1000px) {
  .header-item.--contact::before {
    content: none;
  }
}

.burger {
  display: none;
}

@media screen and (max-width: 1000px) {
  .burger {
    cursor: pointer;
    display: block;
    margin-right: 20px;
  }

  .burger div {
    background-color: var(--color-main);
    height: 2px;
    margin: 8px;
    transition: all .5s ease-in-out;
    width: 25px;
  }

  .toggle .line1 {
    transform: rotate(-45deg) translate(-6px, 6px);
  }

  .toggle .line2 {
    opacity: 0;
  }

  .toggle .line3 {
    transform: rotate(45deg) translate(-8px, -8px);
  }

  .nav-active {
    transform: translateX(0%) !important;
  }
}

/*!
layout > footer
------------------------------
*/
footer {
  background: var(--color-accent-sub);
  color: var(--color-font-white);
  margin-top: -24px;
  padding-top: 110px;
}

@media screen and (max-width: 1000px) {
  footer {
    font-size: var(--fs14);
    padding-top: 72px;
  }
}

.footer-item-list {
  display: flex;
  flex-direction: column;
}

.footer-row {
  align-items: center;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 1000px) {
  .footer-row {
    flex-direction: column;
  }
}

.footer-row.--top {
  margin-bottom: 40px;
}

@media screen and (max-width: 1000px) {
  .footer-row.--top {
    margin-bottom: 16px;
  }
}

.footer-row.--bottom {
  margin-bottom: 48px;
}

@media screen and (max-width: 1000px) {
  .footer-row.--bottom {
    margin-bottom: 40px;
  }
}

.footer-logo-link {
  margin-right: 40px;
  position: relative;
}

@media screen and (max-width: 1000px) {
  .footer-logo-link {
    margin-bottom: 16px;
    margin-right: 0;
  }
}

.footer-logo-img {
  display: block;
  height: 32px;
  width: 167.5px;
}

.footer-logo-link::after {
  background: var(--color-bg-base);
  content: "";
  display: block;
  height: 40px;
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%) skewX(155deg);
  width: 1px;
}

@media screen and (max-width: 1000px) {
  .footer-logo-link::after {
    content: unset;
  }
}

.footer-address {
  margin-left: 40px;
}

@media screen and (max-width: 1000px) {
  .footer-address {
    margin-left: 0;
  }
}

.footer-menu {
  display: flex;
}

@media screen and (max-width: 1000px) {
  .footer-menu {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.footer-menu-item {
  line-height: 80px;
  padding: 0 32px;
  position: relative;
}

@media screen and (max-width: 1000px) {
  .footer-menu-item {
    line-height: 32px;
    margin: 0 10px;
    padding: 0;
    text-align: center;
    width: 25%;
  }
}

.footer-menu-item a {
  display: block;
}

.footer-menu-item:not(.footer-menu-item.--first)::before {
  background: var(--color-bg-base);
  content: "";
  display: block;
  height: 24px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) skewX(155deg);
  width: 1px;
}

@media screen and (max-width: 767px) {
  .footer-menu-item:not(.footer-menu-item.--first)::before {
    left: -10px;
  }
}

@media screen and (max-width: 1000px) {
  .footer-menu-item.--sp-second-row:not(.footer-menu-item.--first)::before {
    content: none;
  }
}

.footer-copyright {
  font-size: var(--fs13);
  margin-bottom: 24px;
}

@media screen and (max-width: 1000px) {
  .footer-copyright {
    font-size: var(--fs12);
  }
}

/*!
component 
------------------------------
*/
.c-cl-w {
  color: var(--color-bg-base);
}

.c-bg-w {
  background: var(--color-bg-base);
}

/*!
component > button
------------------------------
*/
.c-button {
  background: var(--color-main);
  color: var(--color-font-white);
  display: block;
  height: 72px;
  max-width: 200px;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
  transition: background .3s;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .c-button:not(.c-cta-button-tel) {
    height: 56px;
    line-height: 56px;
    padding: 0;
  }
}

@media(hover: hover) {
  .c-button:hover {
    background: var(--color-accent-sub);
    color: var(--color-font-white);
  }
}

.c-button-w {
  background: var(--color-bg-base);
  color: var(--color-font-base);
}

/*!
component > headding
------------------------------
*/
.c-title-h1-en {
  display: block;
  font-size: var(--fs32);
  font-family: var(--font-family-en);
  position: relative;
  text-transform: uppercase;
}

@media screen and (max-width: 767px) {
  .c-title-h1-en {
    font-size: var(--fs24);
  }
}

.c-title-h1-jp {
  font-size: var(--fs20);
}

.c-title-h2 {
  align-items: center;
  display: flex;
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .c-title-h2 {
    margin-bottom: 32px;
  }
}

@media screen and (max-width: 767px) {
  .c-cta .c-title-h2 {
    margin-bottom: 20px;
    margin-top: 10px;
  }
}

.c-title-h2-en {
  display: block;
  font-size: var(--fs32);
  font-family: var(--font-family-en);
  position: relative;
  text-transform: uppercase;
}

@media screen and (max-width: 767px) {
  .c-title-h2-en {
    font-size: var(--fs24);
  }
}

.c-title-h2-en::after {
  background: var(--color-font-black);
  content: "";
  display: block;
  height: 24px;
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%) skewX(155deg);
  width: 1px;
}

.c-title-h2-en.--div-w::after {
  background: var(--color-bg-base)
}

.c-title-h2-jp {
  font-size: var(--fs16);
  margin-left: 32px;
}

/*!
component > breadcrumb
------------------------------
*/
.c-breadcrumb {
  margin-top: 32px;
}

@media screen and (max-width: 767px) {
  .c-breadcrumb {
    margin-top: 16px;
  }
}

.c-breadcrumb.--news-detail {
  margin-top: 112px;
}

@media screen and (max-width: 767px) {
  .c-breadcrumb.--news-detail {
    margin-top: 88px;
  }
}

.c-breadcrumb-list {
  display: flex;
  gap: 0 15px;
  list-style: none;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .c-breadcrumb-list {
    gap: 0 10px;
  }
}

.c-breadcrumb-item {
  align-items: center;
  display: flex;
}

@media screen and (max-width: 767px) {
  .c-breadcrumb-item {
    font-size: var(--fs13);
  }
}

.c-breadcrumb-item:not(:last-child)::after {
  color: var(--color-bg-white);
  content: '/';
  display: inline-block;
  margin-left: 15px;
}

@media screen and (max-width: 767px) {
  .c-breadcrumb-item:not(:last-child)::after {
    margin-left: 10px;
  }
}

/*!
component > local nav
------------------------------
*/
.c-local-nav-list {
  display: flex;
  height: 50px;
  justify-content: space-between;
  max-width: 820px;
  margin: 80px auto 100px;
}

@media screen and (max-width: 767px) {
  .c-local-nav-list {
    flex-wrap: wrap;
    margin: 32px auto 80px;
    padding-bottom: 80px;
  }
}

.c-local-nav.--service .c-local-nav-list {
  margin-bottom: 64px;
}

.c-local-nav.--policy .c-local-nav-list {
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .c-local-nav.--policy .c-local-nav-list {
    padding-bottom: 0;
  }
}

.c-local-nav.--policy .c-local-nav-item {
  margin: unset;
}

@media screen and (max-width: 767px) {
  .c-local-nav.--policy .c-local-nav-item a {
    margin: 0 8px;
  }
}

.c-local-nav-item {
  display: block;
  max-width: 220px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .c-local-nav-item {
    width: 50%;
  }
}

.c-local-nav-item a {
  border-bottom: 1px solid var(--color-border);
  display: block;
  height: 100%;
  line-height: 50px;
  text-align: center;
  transition: all .3s;
  margin: 0 16px;
}

@media(hover: hover) {
  .c-local-nav-item a:hover {
    background-color: var(--color-accent-sub);
    border-bottom: 1px solid var(--color-accent-sub);
    color: var(--color-bg-base);
  }
}

/*!
component > cta
------------------------------
*/
.c-cta {
  background: linear-gradient(115deg, var(--color-main) 50%, #fff0 calc(50% + 1px));
  margin-top: 150px;
  padding-top: 40px;
  padding-bottom: 110px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .c-cta {
    background: linear-gradient(115deg, var(--color-main) 51%, #fff0 calc(51% + 1px));
    margin-top: 100px;
    padding-top: 16px;
    padding-bottom: 48px;
  }
}

.c-cta--wrap {
  position: relative;
}

.c-cta--img {
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 1000px) {
  .c-cta--img img {
    height: 290px;
    object-fit: cover;
  }
}

@media screen and (max-width: 767px) {
  .c-cta--img img {
    height: 265px;
  }
}

.c-cta--contents {
  bottom: 0;
  left: 0;
  position: absolute;
  padding: 75px 18%;
  right: 0;
  top: 0;
}

@media screen and (max-width: 1199px) {
  .c-cta--contents {
    padding: 75px 8%;
  }
}

@media screen and (max-width: 1000px) {
  .c-cta--contents {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
}

.c-cta--contents-text {
  color: var(--color-bg-base);
  line-height: 150%;
  padding-bottom: 48px;
  text-align: center;
}

@media screen and (max-width: 1000px) {
  .c-cta--contents-text {
    margin-top: 40px;
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 767px) {
  .c-cta--contents-text {
    margin-top: 28px;
  }
}

.c-cta-tel {
  align-items: center;
  display: flex;
  font-size: var(--fs30);
  font-family: var(--font-family-en);
  justify-content: center;
}

.c-cta-tel-hour {
  font-size: var(--fs12);
  margin-top: -8px;
}

@media screen and (max-width: 1000px) {
  .c-cta-tel-hour {
    margin-top: -7px;
  }
}

.c-cta-button-wrap {
  display: flex;
}

@media screen and (max-width: 1000px) {
  .c-cta-button-wrap {
    display: flex;
    flex-direction: column;
  }
}

.c-cta-button {
  background: var(--color-accent);
  color: var(--color-font-white);
  max-width: 300px;
  transition: background .3s;
}

@media(hover: hover) {
  .c-cta-button:hover {
    background: var(--color-accent-sub);
  }
}

.c-cta-button-tel {
  background: var(--color-bg-base);
  color: var(--color-font-black);
  max-width: 300px;
  padding: 8px 0;
  position: relative;
}

@media screen and (max-width: 1000px) {
  .c-cta-button-tel {
    margin-bottom: 13px;
  }
}

.c-cta-tel-number {
  margin-left: 20px;
}

@media screen and (max-width: 1000px) {
  .c-cta-tel-number {
    margin-top: -2px;
  }
}

.c-cta-button-tel::before {
  background: url(../img/cta-tel-icon.png) no-repeat top center;
  content: "";
  display: block;
  height: 20px;
  left: 8%;
  position: absolute;
  top: 20px;
  width: 20px;
}

@media screen and (max-width: 1000px) {
  .c-cta-button-tel::before {
    top: 18px;
  }
}

@media(hover: hover) {
  .c-cta-button-tel:hover::before {
    background: url(../img/cta-tel-icon-w.png) no-repeat top center;
  }
}

/*!
component > page-top
------------------------------
*/
.c-page-top-wrap {
  background: url(../img/top-to-icon.png) no-repeat center center;
  bottom: 20px;
  cursor: pointer;
  opacity: 0;
  position: fixed;
  right: 20px;
  transition: .3s;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .c-page-top-wrap {
    bottom: 10px;
    height: 40px;
    right: 10px;
    width: 40px;
  }
}

.c-page-top-link {
  display: block;
  height: 50px;
  width: 50px;
}

/*!
component > news
------------------------------
*/
@media screen and (max-width: 767px) {
  .c-news-list {
    padding: 0 24px;
  }
}

.c-news-item {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}

.c-news-item:last-child {
  margin-bottom: 56px;
}

@media screen and (max-width: 1000px) {
  .c-news-item:last-child {
    margin-bottom: 40px;
  }
}

.c-news-item a {
  display: flex;
  flex-direction: row;
  padding: 16px;
  transition: color .3s;
}

@media screen and (max-width: 767px) {
  .c-news-item a {
    flex-wrap: wrap;
    padding: 16px 0px;
  }

  .c-news-item a:nth-of-type(n+3) {
    width: 100%;
  }

  .c-news-item a p {
    margin-top: 10px;
  }
}

@media(hover: hover) {
  .c-news-item a:hover {
    color: var(--color-list-hover);
  }
}

.c-news-time {
  margin-right: 16px;
}

@media screen and (max-width: 767px) {
  .c-news-time {
    font-size: var(--fs14);
  }
}

.c-news-category {
  background: var(--color-bg-base);
  margin-right: 16px;
  max-height: 27px;
  min-width: 100px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .c-news-category {
    font-size: var(--fs14);
  }
}

/*!
page > top > top-kv
------------------------------
*/
.top-kv {
  height: 800px;
  margin-bottom: 120px;
  margin-top: 80px;
  position: relative;
}

@media screen and (max-width: 1000px) {
  .top-kv {
    height: 600px;
  }
}

@media screen and (max-width: 767px) {
  .top-kv {
    margin-top: 72px;
    margin-bottom: 80px;
  }
}

.top-kv::before {
  background-image: url(../img/top-kv-pc.jpg);
  background-position-x: center;
  background-position-y: top;
  background-size: cover;
  background-repeat: no-repeat;
  content: '';
  display: block;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .top-kv::before {
    background-image: url(../img/top-kv-sp.jpg);
    background-position: center;
  }
}

.top-kv-inner {
  background: #ffffffE6;
  box-shadow: 0px 8px 16px 4px rgba(0, 0, 0, 0.25);
  left: 270px;
  padding: 24px;
  position: absolute;
  top: 77%;
  transform: translateY(-50%);
}

@media screen and (max-width: 1000px) {
  .top-kv-inner {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.top-kv-copy-text {
  color: var(--color-font-black);
  font-size: var(--fs34);
  font-family: var(--font-family-en);
  letter-spacing: 10px;
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .top-kv-copy-text {
    font-size: var(--fs32);
    letter-spacing: 10px;
  }
}

.top-kv-copy-text--color {
  color: var(--color-accent);
}

.top-kv-copy-text--sub-jp {
  font-size: var(--fs20);
  font-family: var(--font-family-base);
  letter-spacing: 8px;
  margin-top: 16px;
}

@media screen and (max-width: 767px) {
  .top-kv-copy-text--sub-jp {
    font-size: var(--fs16);
  }
}

/*!
top-page > service
------------------------------
*/
.top-service {
  background: linear-gradient(115deg, var(--color-main) 74.4%, #fff calc(74.4% + 1px));
  margin-bottom: 120px;
  padding-top: 56px;
  padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
  .top-service {
    background: linear-gradient(115deg, var(--color-main) 45%, #fff calc(45% + 1px));
    margin-bottom: 0px;
    padding-top: 48px;
    padding-bottom: 80px;
  }
}

.top-service-text {
  line-height: 150%;
  margin-bottom: 56px;
}

@media screen and (max-width: 767px) {
  .top-service-text {
    margin-bottom: 48px;
  }
}

.top-service-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 56px;
}

@media screen and (max-width: 1000px) {
  .top-service-list {
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 767px) {
  .top-service-list {
    align-items: center;
    flex-direction: column;
    margin-bottom: 32px;
  }
}

.top-service-item {
  height: 100%;
  position: relative;
  width: 285px;
}

@media screen and (max-width: 1000px) {
  .top-service-item {
    margin-bottom: 40px;
    width: 38%;
  }
}

@media screen and (max-width: 767px) {
  .top-service-item {
    margin-bottom: 32px;
    width: 285px;
  }
}

.top-service-item-text {
  background: var(--color-bg-sub);
  color: var(--color-font-base);
  padding: 15px 0;
  text-align: center;
  transition: background .3s;
}

@media screen and (max-width: 767px) {
  .top-service-item-text {
    font-size: var(--fs16);
  }
}

.top-service-item a {
  display: block;
  height: 100%;
  width: 100%;
}

.top-service-item--img {
  display: inline-block;
  position: relative;
}

.top-service-item--img::before {
  background-color: var(--color-main);
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  transition: opacity .3s;
  width: 100%;
}

@media(hover: hover) {
  .top-service-item a:hover>.top-service-item--img::before {
    opacity: 0;
  }

  .top-service-item a:hover>.top-service-item-text {
    background: var(--color-accent-sub);
    color: var(--color-bg-base);
  }
}

.number-tag {
  background: var(--color-font-black);
  color: var(--color-font-white);
  font-family: var(--font-family-en);
  font-size: var(--fs32);
  height: 50px;
  left: 10px;
  line-height: 50px;
  position: absolute;
  top: -10px;
  text-align: center;
  width: 50px;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .top-service .c-button-w {
    background: var(--color-main);
    color: var(--color-font-white);
  }
}

.proc-img-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 40px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.proc-img-modal-content {
  display: block;
  width: 80%;
  max-width: 700px;
}
@media screen and (max-width: 767px) {
  .proc-img-modal-content {
    width: 90%;
  }
}

#proc-img-modal-close {
  position: absolute;
  top: 64px;
  right: 56px;
  color: #f1f1f1;
  font-size: 48px;
  font-weight: bold;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #proc-img-modal-close {
    top: 160px;
    right: 20px;
  }
}

.process-sample-img.--popup{
  cursor: pointer;
}

/*!
top-page > news
------------------------------
*/
.top-news {
  margin-bottom: 120px;
}

@media screen and (max-width: 767px) {
  .top-news {
    margin-bottom: 80px;
  }
}

.top-news-container {
  background: var(--color-bg-sub);
  padding: 56px 150px
}

@media screen and (max-width: 1000px) {
  .top-news-container {
    padding: 24px 24px 64px;
  }
}

@media screen and (max-width: 767px) {
  .top-news-container {
    padding: 24px 0px 48px;
  }
}

/*!
top-page > company
------------------------------
*/
.top-company {
  overflow: hidden;
  position: relative;
}

.top-company-slider--wrap {
  position: relative
}

.top-company-slider--img {
  animation: slideAnimate 2500s linear infinite;
  background: url(../img/top-slider.jpg) repeat-x left center / auto 420px;
  height: 350px;
  pointer-events: none;
  will-change: transform;
  width: 100000px;
}

@media screen and (max-width: 767px) {
  .top-company-slider--img {
    background: url(../img/top-slider.jpg) repeat-x left center / auto 200px;
    height: 200px;
    object-fit: cover;
  }
}

@keyframes slideAnimate {
  0% {
    background-position: left 0 center;
  }
  100% {
    background-position: left -100000px center;
  }
}

.top-company-slider--text {
  color: var(--color-bg-base);
  left: 0;
  position: absolute;
  right: 0;
  top: 115px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .top-company-slider--text {
    transform: translateY(-55%);
    line-height: 1.5;
  }
}

.top-company-slider--text p {
  padding-bottom: 24px;
}

/*!
sub-page > general
------------------------------
*/
.page-kv {
  background: linear-gradient(115deg, var(--color-main) 35%, #fff0 calc(35% + 1px));
  height: 320px;
  margin-top: 80px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .page-kv {
    background: linear-gradient(115deg, var(--color-main) 42%, #fff0 calc(42% + 1px));
    height: 280px;
    margin-top: 72px;
  }
}

.page-kv-inner {
  position: relative;
  top: 120px;
}

@media screen and (max-width: 767px) {
  .page-kv-inner {
    top: 100px;
  }
}

.page-kv-img {
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 450px);
  z-index: -1;
}

@media screen and (max-width: 1600px) {
  .page-kv-img {
    width: calc(100% - 240px);
  }
}

@media screen and (max-width: 1000px) {
  .page-kv-img {
    width: calc(100% - 160px);
  }
}

@media screen and (max-width: 767px) {
  .page-kv-img {
    width: 100%;
  }
}

.page-kv-img.--company {
  background: url(../img/company-kv.jpg) no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .page-kv-img.--company {
    background: url(../img/company-kv-sp.jpg) no-repeat center center;
    background-size: cover;
  }
}

.page-kv-img.--service {
  background: url(../img/service-kv.jpg) no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .page-kv-img.--service {
    background: url(../img/service-kv-sp.jpg) no-repeat center center;
    background-size: cover;
  }
}

.page-kv-img.--news {
  background: url(../img/news-kv.jpg) no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .page-kv-img.--news {
    background: url(../img/news-kv-sp.jpg) no-repeat center center;
    background-size: cover;
  }
}

.page-kv-img.--contact {
  background: url(../img/contact-kv.jpg) no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .page-kv-img.--contact {
    background: url(../img/contact-kv-sp.jpg) no-repeat center center;
    background-size: cover;
  }
}

.page-kv-img.--policy {
  background: url(../img/policy-kv.jpg) no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .page-kv-img.--policy {
    background: url(../img/policy-kv-sp.jpg) no-repeat center center;
    background-size: cover;
  }
}

/*!
sub-page > company 
------------------------------
*/
.greeting {
  margin-bottom: 120px;
}

@media screen and (max-width: 767px) {
  .greeting {
    margin-bottom: 80px;
  }
}

.greeting-container {
  display: flex;
}

@media screen and (max-width: 767px) {
  .greeting-container {
    flex-direction: column;
  }
}

.greeting-item {
  width: 1040px;
}

@media screen and (max-width: 767px) {
  .greeting-item {
    width: 100%;
  }
}


.greeting-item.--text {
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .greeting-item.--text {
    margin: 0;
  }
}

.greeting-item.--img {
  margin: 0 32px 0 16px;
}

@media screen and (max-width: 767px) {
  .greeting-item.--img {
    margin: 24px 0 0;
  }
}

.greeting-name {
  font-size: var(--fs20);
  text-align: end;
  margin-top: 32px;
}

@media screen and (max-width: 767px) {
  .greeting-name {
    font-size: var(--fs16);
    margin-top: 20px;
  }
}

.greeting-name-title {
  font-size: var(--fs14);
}

.outline-wrap {
  background: var(--color-bg-sub);
  padding-top: 40px;
  padding-bottom: 120px;
}

@media screen and (max-width: 767px) {
  .outline-wrap {
    padding-bottom: 80px;
  }
}

.outline-table-wrap {
  background: var(--color-bg-base);
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 70px;
}

@media screen and (max-width: 767px) {
  .outline-table-wrap {
    padding: 24px 16px;
    width: 100%;
  }
}

.outline-table tr {
  border-top: 1px solid var(--color-border);
  display: block;
  padding: 16px;
}

@media screen and (max-width: 767px) {
  .outline-table tr {
    padding: 16px 8px;
  }
}

.outline-table tr:last-child {
  border-bottom: 1px solid var(--color-border);
}

.outline-table th {
  padding-left: 24px;
  width: 225px;
}

@media screen and (max-width: 767px) {
  .outline-table th {
    padding-left: 0px;
    text-align: center;
    width: 80px;
  }
}

@media screen and (max-width: 767px) {
  .outline-table td {
    padding-left: 24px;
  }
}

.history {
  margin-bottom: 80px;
}

.history-wrap {
  background: var(--color-bg-sub);
  padding-bottom: 64px;
}

.history-table-wrap {
  display: flex;
  justify-content: center;
}

.history-table {
  width: unset;
}

.history-table tr {
  display: block;
}

.history-table th {
  border-right: 1px solid var(--color-border);
  padding: 16px 0;
  width: 120px;
}

.history-table td {
  padding-left: 16px;
  padding-top: 16px;
}

.history-table th,
.history-table td {
  vertical-align: top;
}

@media screen and (max-width: 767px) {

  .history-table th,
  .history-table td {
    padding-top: 0;
    padding-bottom: 24px;
    vertical-align: top;
  }

  .history-table th {
    padding-right: 16px;
    text-align: right;
    width: 80px;
  }

  .history-table .first-row th,
  .history-table .first-row td {
    padding-top: 8px;
  }

  .history-table .last-row th,
  .history-table .last-row td {
    padding-bottom: 8px;
  }
}

.access-info-container {
  display: flex;
  justify-content: center;
  margin-top: -5px;
}

@media screen and (max-width: 767px) {
  .access-map {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }
}

.access--info-item {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .access--info-item {
    width: 100%;
  }
}

.access--info-item.--img img {
  height: 300px;
}

@media screen and (max-width: 767px) {
  .access--info-item.--img {
    display: none;
  }
}

.access--info-item.--img-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .access--info-item.--img-sp {
    display: block;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }
}

.access--info-item.--text {
  padding: 54px 64px;
}

@media screen and (max-width: 767px) {
  .access--info-item.--text {
    padding: 24px 0px 0;
  }
}

.access--info-company {
  font-size: var(--fs20);
}

@media screen and (max-width: 767px) {
  .access--info-company {
    font-size: var(--fs16);
  }
}

.access--info-company {
  margin-bottom: 4px;
}

.access--info-address {
  margin-bottom: 16px;
}

.access--info-etc {
  line-height: 2;
}

/*!
sub-page > service
------------------------------
*/
.feature {
  margin-bottom: 120px;
}

@media screen and (max-width: 767px) {
  .feature {
    margin-bottom: 80px;
  }
}

.feature-wrap {
  background: var(--color-bg-sub);
  padding: 24px;
}

.feature-wrap h2 {
  font-size: var(--fs24);
  text-align: center;
  margin-bottom: 24px;
}

@media screen and (max-width: 767px) {
  .feature-wrap h2 {
    font-size: var(--fs18);
  }
}

.feature-wrap .collette-jig {
  text-decoration: underline;
  margin: 0 4px;
  color: var(--color-main);
}

.service-info-container {
  align-items: center;
  display: flex;
  margin-bottom: 54px;
  align-items: start;
}

@media screen and (max-width: 1000px) {
  .service-info-container {
    flex-direction: column;
    margin-bottom: 40px;
  }
}

.service-info-container.--jig {
  align-items: start;
}

.service-info-item {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .service-info-item {
    width: 100%;
  }
}

.service-info-item.--main {
  margin: 0 16px 0 32px;
}
@media screen and (max-width: 1000px) {
  .service-info-item.--main {
    margin: 0 auto 32px;
    text-align: center;
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .service-info-item.--main {
    width: 100%;
  }
}

.service-info-item.--main .process-sample-img {
  height: 100%;
}
@media screen and (max-width: 1000px) {
  .service-info-item.--main .process-sample-img {
    width: 100%;
  }
}

.service-info-item.--text {
  margin: 0 32px 0 16px;
  width: 40%;
}

@media screen and (max-width: 1000px) {
  .service-info-item.--text {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .service-info-item.--text {
    margin: 0;
  }

  .service-info-item.--jig {
    margin-bottom: 24px;
  }
}

.service-info-item.--text h3 {
  font-size: var(--fs20);
  text-align: center;
  margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
  .service-info-item.--text h3 {
    font-size: var(--fs16);
    margin-bottom: 24px;
  }
}

.service-table tr {
  border-top: 1px solid var(--color-border);
  display: block;
  padding: 10px;
}

@media screen and (max-width: 767px) {
  .service-table tr {
    padding: 10px 16px 16px;
  }
}

.service-table tr:last-child {
  border-bottom: 1px solid var(--color-border);
}

.service-table th {
  padding-left: 24px;
  width: 130px;
}

@media screen and (max-width: 767px) {
  .service-table th {
    display: block;
    margin-bottom: 8px;
    padding-left: 0px;
    text-align: left;
  }
}

.service-img-container {
  margin-bottom: 120px;
}

@media screen and (max-width: 767px) {
  .service-img-container {
    margin-bottom: 100px;
  }
}

.service-img-container h3 {
  font-size: var(--fs20);
  text-align: center;
  margin-bottom: 32px;
}

@media screen and (max-width: 767px) {
  .service-img-container h3 {
    font-size: var(--fs16);
    margin-bottom: 24px;
  }
}

.process-sample-wrap {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 1000px) {
  .process-sample-wrap {
    flex-direction: column;
  }
}

.process-sample-item {
  margin: 0 32px;
  width: 33%;
}

@media screen and (max-width: 1000px) {
  .process-sample-item {
    margin: 0 0 32px;
    width: 100%;
  }

  .process-sample-item:last-child {
    margin: 0;
  }
}

.process-sample-img {
  height: 300px;
  margin-bottom: 10px;
  background-size: cover;
  object-fit: cover;
}

@media screen and (max-width: 1000px) {
  .process-sample-img {
    margin: 0 auto 10px;
    width: 350px;
  }
}

.process-sample-text {
  text-align: center;
  margin-bottom: 32px;
}

@media screen and (max-width: 1000px) {
  .process-sample-text {
    text-align: left;
  }
}

/*!
sub-page > news
------------------------------
*/
.news-container {
  background: var(--color-bg-sub);
  padding: 56px 150px;
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
  .news-container {
    padding: 24px 0px 64px;
    margin-top: 40px;
  }
}

.news-container .c-news-item:last-child {
  margin-bottom: 0px;
}

.news-list-pager {
  color: var(--color-font-black);
  display: flex;
  justify-content: space-between;
  padding: 56px 0 0;
  max-width: 270px;
  margin: 0 auto;
}

.news-list-pager-item {
  position: relative;
}

.news-list-pager-item a {
  display: block;
  height: 100%;
  padding: 8px 16px;
  width: 100%;
}

.news-list-pager-item--current {
  color: var(--color-font-white);
  background: var(--color-font-black);
}

.news-list-pager-item--next::before,
.news-list-pager-item--prev::before {
  content: '';
  background: url(../img/news-pager-arrow.svg) no-repeat top center;
  background-size: 100%;
  display: block;
  height: 24px;
  position: absolute;
  pointer-events: none;
  right: 5px;
  top: 23%;
  width: 24px;
}

.news-list-pager-item--next::before {
  transform: rotateY(180deg);
  right: -25px;
}

.news-list-pager-item--prev a {
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.news-list-pager-item--next a {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/*!
sub-page > news-detail
------------------------------
*/
.news-detail-header {
  display: flex;
  margin-bottom: 32px;
}

@media screen and (max-width: 767px) {
  .news-detail-header {
    margin-bottom: 16px;
  }
}

.news-detail-contents {
  margin-bottom: 72px;
}

@media screen and (max-width: 767px) {
  .news-detail-contents {
    margin-bottom: 40px;
  }
}

.news-detail-contents p {
  margin: 4px 0;
  min-height: 1em;
}

.news-detail-contents a {
  text-decoration: underline;
  color: var(--color-main);
}

.news-detail-contents h1 {
  font-size: var(--fs24);
  margin-bottom: 32px;
}

@media screen and (max-width: 767px) {
  .news-detail-contents h1 {
    font-size: var(--fs20);
  }
}

.news-container.--detail {
  padding-bottom: 64px;
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .news-container.--detail {
    padding: 32px 24px;
  }
}

.news-detail-pager {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .news-detail-pager {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.news-detail-pager a {
  display: block;
  height: 100%;
  padding: 8px 40px;
  width: 100%;
}

.news-detail-pager-item {
  position: relative;
}

@media screen and (max-width: 767px) {
  .news-detail-pager-item {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .news-detail-pager-item.--next {
    text-align: end;
  }
}

@media screen and (max-width: 767px) {
  .news-detail-pager-item.--next .c-news-time {
    margin-right: 0px;
  }
}

.news-detail-pager-item.--next:not(.--none)::before,
.news-detail-pager-item.--prev:not(.--none)::before {
  background: url(../img/news-pager-arrow.svg) no-repeat top center;
  background-size: 100%;
  content: '';
  display: block;
  height: 24px;
  position: absolute;
  pointer-events: none;
  top: 30%;
  width: 24px;
}

.news-detail-pager-item.--next::before {
  right: -4px;
  transform: rotateY(180deg);
}

/*!
sub-page > contact
------------------------------
*/
.contact-header {
  margin: 80px 0 54px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .contact-header {
    margin-bottom: 40px;
  }
}

.contact-form,
.contact-tel {
  background: var(--color-bg-sub);
  padding: 32px 10px;
  text-align: center;
}

.contact-form {
  margin-bottom: 174px;
}

@media screen and (max-width: 767px) {
  .contact-form {
    margin-bottom: 124px;
  }
}

.contact-tel {
  margin-bottom: 72px;
}

@media screen and (max-width: 767px) {
  .contact-tel {
    margin-bottom: 54px;
  }
}

.contact-tel h2 {
  color: var(--color-main);
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .contact-tel h2 {
    margin-bottom: 4px;
  }
}

.contact-form h2 {
  color: var(--color-main);
  margin-bottom: 32px;
}

@media screen and (max-width: 767px) {
  .contact-form h2 {
    margin-bottom: 24px;
  }
}

.contact-tel-button {
  align-items: center;
  color: var(--color-font-black);
  display: flex;
  font-size: var(--fs30);
  font-family: var(--font-family-en);
  flex-direction: column;
  justify-content: center;
  max-width: 300px;
  margin: 0 auto;
}

.contact-tel-number {
  margin-left: 20px;
  margin-bottom: 4px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .contact-tel-number {
    font-size: var(--fs24);
  }
}

.contact-tel-number::before {
  background: url(../img/cta-tel-icon.png) no-repeat top center;
  content: "";
  display: block;
  height: 20px;
  left: -25px;
  position: absolute;
  top: 13px;
  width: 20px;
}

@media screen and (max-width: 767px) {
  .contact-tel-number::before {
    top: 7px;
  }
}

.contact-tel-hour {
  font-size: var(--fs12);
  font-family: var(--font-family-base);
  margin-top: -8px;
}

.contact-form-text {
  margin-bottom: 48px;
}

.contact-form-text.--note {
  margin-top: 4px;
  font-size: var(--fs14);
}

.contact-form-item {
  margin: 0 80px;
}

@media screen and (max-width: 767px) {
  .contact-form-item {
    margin: 0 16px;
  }
}

.form-field {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

@media screen and (max-width: 767px) {
  .form-field:not(.field-privacy) {
    flex-direction: column;
  }
}

.field-label {
  display: inline-block;
  text-align: start;
  width: 25%;
}

@media screen and (max-width: 767px) {
  .field-label {
    margin-bottom: 10px;
    width: 100%;
  }
}

.form-field:not(.field-privacy) span.wpcf7-form-control-wrap input:not(input[type="checkbox"]),
.form-field:not(.field-privacy) span.wpcf7-form-control-wrap textarea {
  background: var(--color-bg-base);
  padding: 8px 16px;
  width: 100%;
}

::placeholder {
  color: var(--color-placeholder);
  font-weight: 300;
}

input[type=checkbox] {
  display: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border: 2px solid var(--color-border);
  outline: none;
}

@media screen and (max-width: 767px) {
  .wpcf7-textarea {
    height: 200px;
  }
}

.form-input-checkbox {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 5px;
  position: relative;
  width: auto;
}

.field-privacy input[type="checkbox"] {
  background: var(--color-bg-white);
  border: 1px solid var(--color-font-base);
  display: block;
  height: 16px;
  left: 0px;
  margin-right: 10px;
  position: relative;
  top: 2px;
  width: 16px;
}

.field-privacy input[type=checkbox]:checked:before {
  border-bottom: 1px solid var(--color-font-black);
  border-right: 1px solid var(--color-font-black);
  content: "";
  height: 10px;
  left: 5px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg);
  width: 5px;
}

.form-privacy-link {
  text-decoration: underline;
}

.form-field:not(.field-privacy) span.wpcf7-form-control-wrap {
  width: 75%;
}

@media screen and (max-width: 767px) {
  .form-field:not(.field-privacy) span.wpcf7-form-control-wrap {
    width: 100%;
  }
}

.field-privacy {
  margin-bottom: 56px;
}

@media screen and (max-width: 767px) {
  .field-privacy {
    justify-content: center;
    margin-bottom: 48px;
  }
}

.form-required {
  color: var(--color-required);
  margin-left: 4px;
}

.form-button .c-button-cta,
.wpcf7-submit {
  cursor: pointer;
  letter-spacing: 8px;
}

.c-button.c-button-cta.wpcf7-submit-wrap {
  padding: 0;
}

.wpcf7-submit {
  background: transparent;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .wpcf7-submit {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/*!
sub-page > contact-complete
------------------------------
*/
.contact-complete.l-section {
  margin-bottom: 150px;
}

.complete-container {
  text-align: center;
  margin-top: 180px;
}

@media screen and (max-width: 767px) {
  .complete-container {
    margin-top: 152px;
  }
}

.complete-title {
  color: var(--color-main);
  font-family: var(--font-family-en);
  font-size: var(--fs32);
  line-height: 1.2;
  margin-bottom: 32px;
}

@media screen and (max-width: 767px) {
  .complete-title {
    font-size: var(--fs22);
  }
}

.complete-text {
  margin-bottom: 100px;
}

@media screen and (max-width: 767px) {
  .error-text {
    margin-bottom: 32px;
  }
}

/*!
sub-page > policy
------------------------------
*/
.policy-h3 {
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs20);
  line-height: 40px;
  margin-bottom: 10px;
  width: 250px;
}

@media screen and (max-width: 767px) {
  .policy-h3 {
    font-size: var(--fs16);
  }
}

.policy-text:not(:last-child) {
  margin-bottom: 48px;
}

@media screen and (max-width: 767px) {
  .policy-text:not(:last-child) {
    margin-bottom: 32px;
  }
}

.policy-wrap {
  margin-bottom: 120px;
}

@media screen and (max-width: 767px) {
  .l-container-s.policy-wrap {
    margin-bottom: 80px;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {

  .basic-policy .c-title-h2,
  .privacy .c-title-h2 {
    align-items: start;
    flex-direction: column;
  }

  .basic-policy .c-title-h2-jp,
  .privacy .c-title-h2-jp {
    margin-left: 0;
  }
}

/*!
sub-page > 404
------------------------------
*/
.error-container {
  text-align: center;
  margin-top: 180px;
}

@media screen and (max-width: 767px) {
  .error-container {
    margin-top: 152px;
  }
}

.error-title {
  color: var(--color-font-lblue);
  font-family: var(--font-family-en);
  font-size: var(--fs100);
  line-height: 1.2;
  margin-bottom: 32px;
}

@media screen and (max-width: 767px) {
  .error-title {
    font-size: var(--fs48);
  }
}

.error-text {
  margin-bottom: 56px;
}

@media screen and (max-width: 767px) {
  .error-text {
    margin-bottom: 32px;
  }

  .error-text:nth-last-of-type(1) {
    margin-bottom: 80px;
  }
}

.grecaptcha-badge { visibility: hidden; }