@charset "utf-8";

/* Reset(Top,Header,Footer)
=====================================================================*/
body:has(.p-contents) {
  margin: 0;
  padding: 0;
  background-color: transparent;
  text-align: left;
}

body:has(.p-content) header,
body:has(.p-content) footer,
body:has(.p-content) main,
body:has(.p-content) article,
body:has(.p-content) section,
body:has(.p-content) aside,
body:has(.p-content) div,
body:has(.p-content) ul,
body:has(.p-content) li,
body:has(.p-content) p {
  padding: 0;
  margin: 0;
}

.p-header *,
.p-header ::before,
.p-header ::after,
.p-footer *,
.p-footer ::before,
.p-footer ::after,
.p-contents *,
.p-contents ::before,
.p-contents ::after {
  box-sizing: border-box;
  background-repeat: no-repeat;
  min-height: 0%;
}

.p-header a,
.p-footer a,
body:has(.p-contents) a {
  color: var(--color-black);
  text-decoration: none;
}

.p-header a:hover,
.p-footer a:hover,
body:has(.p-contents) a:hover {
  color: inherit;
  text-decoration: none;
}

/* Utility
=====================================================================*/
@media (min-width: 769px) {
  .u-only--sp {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .u-only--pc {
    display: none !important;
  }
}

.is-display--none {
  display: none !important;
}


/* Animation
=====================================================================*/
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes push {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(-3px, 3px);
  }
}

@keyframes push-pc {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(-5px, 5px);
  }
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

:root {
  --trans-opacity: opacity 0.3s ease;
  --trans-color: color 0.3s ease;
  --trans-trans: transform 0.3s ease;
  ;
  --trans-color-trans: color 0.3s ease, transform 0.3s ease;
  --trans-bordercolor: border-color 0.3s ease;
  --trans-bg: background-color 0.3s ease;
  --trans-bg-color-trans: background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

/* Font preset
=====================================================================*/
:root {
  --font-jp: "Noto Sans JP", sans-serif;
  --font-eng: "Lato", sans-serif;
}

.p-header *,
.p-footer * {
  font-family: var(--font-jp);
  font-style: normal;
}

body:has(.p-contents) * {
  font-family: var(--font-jp);
}

.u-eng {
  font-family: var(--font-eng) !important;
  font-style: bold;
}

.u-strong {
  font-weight: 700;
}

/* Color preset
=====================================================================*/
:root {
  --color-white: #FFFFFF;
  --color-black: #2A2A2A;
  --color-gray01: #434343;
  --color-gray02: #717678;
  --color-gray03: #B3B3B3;
  --color-gray04: #D9D9D9;
  --color-gray05: #F1F1F1;
  --color-lightblue: #E5F3FF;
  --color-lightblue03: #EBF3FA;
  --color-blue01: #008CD6;
  --color-blue02: #C9DCEB;
  --color-blue03: #52A0E3;
  --color-blue04: #0A7ABF;
  --color-blue05: #1271B0;
  --color-orange: #E0300B;
  --color-orange03: #E67B65;
  --color-lightorange: #F09B15;
  --color-lightorange02: #DF8800;
  --color-deepblue: #003686;
  --grd-blue: linear-gradient(180deg, #008CD6 0%, #0085CC 100%);
}

body:has(.p-contents) {
  color: var(--color-black);
}

.u-deepblue {
  color: var(--color-deepblue);
}

/* Layout
=====================================================================*/
body:has(.p-contents) {
  display: grid;
  align-items: space-between;
  min-width: 375px;
  min-height: 100vh;
}

.p-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.l-contents-area {
  width: 100%;
  padding: 78px 0 0;
  overflow-x: hidden;
}

.l-contents-inner {
  padding: 0 24px;
}

@media (min-width: 769px) {
  body:has(.p-contents) {
    min-width: 1024px;
  }

  .l-header-inner,
  .l-footer-inner {
    min-width: 1024px;
  }

  .l-contents-area {
    padding-top: 88px;
  }

  .l-contents-inner {
    min-width: 1024px;
    max-width: 1600px;
    padding: 0 80px;
    margin: 0 auto;
  }
}

/* Parts
=====================================================================*/
.c-button {
  width: 100%;
  border-radius: 2px;
  height: 50px;
}

.c-button a {
  display: grid;
  place-content: center;
  width: 100%;
  height: 50px;
  border-radius: 2px;
  padding: 0 17px;
}

.c-button--txt {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

.c-button-blue a {
  background-color: var(--color-blue01);
}

.c-button-red a {
  background-color: var(--color-orange);
}

.c-button-red .c-button--txt,
.c-button-blue .c-button--txt {
  color: var(--color-white);
}

.c-button-white a {
  background-color: transparent;
  border: 1px solid var(--color-gray02);
}

@media (min-width: 769px) {
  .c-button {
    height: 42px;
    border: 1px solid transparent;
    transition: var(--trans-bordercolor);
    width: fit-content;
  }

  .c-button:has(a:hover) {
    border-color: var(--color-gray03);
  }

  .c-button a {
    height: 42px;
    transition: var(--trans-bg-color-trans);
  }

  .c-button a:hover {
    transform: translate(-4px, 4px);
  }

  .c-button--txt {
    font-size: 15px;
  }

  .c-button-red a,
  .c-button-blue a {
    min-width: 222px;
  }

  .c-button-white a:hover {
    background-color: var(--color-blue01);
    color: var(--color-white);
    transform: translate(-4px, 4px);
    border-color: var(--color-blue01);
  }

  .c-button-white a:hover .c-button--txt {
    color: var(--color-white);
  }
}

.c-txt {
  display: grid;
  align-items: start;
  align-content: start;
  gap: 14px;
}

.c-txt p {
  font-weight: 400;
  font-size: 14px;
  line-height: 170%;
  letter-spacing: 0.06em;
  margin: 0;
}

.c-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.c-top-section-heading {
  margin: 0 0 16px;
}

.c-top-section-heading--subtxt {
  margin: 0 0 12px;
  color: var(--color-lightorange02);
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: 0.08em;
  position: relative;
  text-align: left;
}

.c-top-section-heading--subtxt::before {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-lightorange);
  transform: rotate(-45deg);
  position: absolute;
  top: -7px;
  left: -13px;
}

.c-top-section-heading--maintxt {
  font-weight: 700;
  font-size: 23.5px;
  line-height: 150%;
  letter-spacing: 0.06em;
  text-align: left;
}

.c-top-section-heading--maintxt .u-small {
  display: block;
  font-size: 14px;
  line-height: 1.6;
}

@media (min-width: 769px) {
  .c-top-section-heading {
    margin-bottom: 24px;
  }

  .c-top-section-heading--subtxt {
    margin-bottom: 20px;
  }

  .c-top-section-heading--maintxt {
    font-size: 30px;
  }

  .c-top-section-heading--maintxt .u-small {
    display: block;
    font-size: 17px;
  }
}

/* Header
=====================================================================*/
.p-header {
  background-color: var(--color-white);
  transition: var(--trans-trans);
}

.is-header-down {
  transform: translateY(-54px);
}

.c-header-top {
  display: grid;
  place-content: center;
  width: 100%;
  height: 24px;
  border-bottom: 1px solid var(--color-gray05);
}

.c-header-top--txt {
  color: var(--color-gray02);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.c-header {
  display: grid;
  align-items: center;
  width: 100%;
  height: 54px;
  padding: 0 8px 0 12px;
  background-color: var(--color-white);
  border-bottom: 4px solid var(--color-blue01);
}

.l-header-inner {
  display: flex;
  justify-content: space-between;
}

.c-header-logo--img {
  width: 144px;
  height: 27px;
}

.c-header-logo--img img {
  display: block;
  width: 100%;
  object-fit: contain;
}

.c-header-nav-parent {
  cursor: pointer;
}

.l-header-nav-childrenarea {
  display: none;
}

@media (max-width: 768px) {
  .p-header:has(.is-spnav-on) {
    transform: translateY(-24px);
  }

  .is-header-down.p-header {
    transform: translateY(-78px);
  }

  .c-spbutton {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 9px;
    width: 90px;
    height: 36px;
    padding: 0 12px;
    border-radius: 2px;
    background-color: var(--color-deepblue);
    cursor: pointer;
  }

  .l-spbutton-bararea {
    display: grid;
    align-content: space-between;
    width: 20px;
    height: 11px;
  }

  .c-spbutton--bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    transform: scaleY(0.5) translateY(1px);
    transition: var(--trans-trans);
  }

  .is-spnav-on .c-spbutton--bar:nth-of-type(1) {
    height: 1px;
    transform: rotate(30deg) translate(3px, 4px);
  }

  .is-spnav-on .c-spbutton--bar:nth-of-type(2) {
    display: none;
  }

  .is-spnav-on .c-spbutton--bar:nth-of-type(3) {
    height: 1px;
    transform: rotate(-30deg) translate(3px, -4px);
  }

  .c-spbutton--txt {
    color: var(--color-white);
    font-family: var(--font-eng);
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 160%;
  }

  .l-header-navarea {
    width: 100%;
    height: calc(100dvh - 54px);
    background-color: var(--color-white);
    overflow-y: auto;
    opacity: 0;
    transform: scaleY(0);
    transition: var(--trans-trans);
    transform-origin: top left;
    position: absolute;
    top: 78px;
    left: 0;
    z-index: 50;
  }

  .is-spnav-show.l-header-navarea {
    display: block;
    opacity: 1;
    transform: scaleY(1.0);
    overflow-y: auto;
  }

  .l-header-nav-inner {
    display: grid;
  }

  .c-spnav-top {
    order: 1;
  }

  .c-header-nav {
    order: 2;
  }

  .c-header-subnav {
    order: 3;
  }

  .c-spnav-top a,
  .c-header-nav-parent,
  .c-header-subnav-list li a,
  .c-header-navlist li a {
    display: block;
    padding: 20px 24px;
    background-color: var(--color-blue01);
    color: var(--color-white);
    font-weight: 700;
    font-size: 13px;
    line-height: 120%;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-blue03);
    position: relative;
  }

  .c-spnav-top a:hover,
  .c-header-nav-parent:hover,
  .c-header-subnav-list li a:hover,
  .c-header-navlist li a:hover {
    color: var(--color-white);
  }

  .c-header-nav-parent::before,
  .c-header-nav-parent::after {
    content: '';
    display: block;
    width: 11px;
    height: 1px;
    background-color: var(--color-blue02);
    position: absolute;
    top: 50%;
    right: 24px;
  }

  .c-header-nav-parent::after {
    transform: rotate(90deg);
  }

  .is-open .c-header-nav-parent::after {
    display: none;
  }

  .c-header-childnav-list li a {
    background-color: var(--color-blue05);
    border-bottom-color: var(--color-blue05);
  }

  .c-spnav-top a {
    display: flex;
    gap: 6px;
    justify-content: start;
    color: var(--color-white) !important;
  }

  .c-spnav-top a::before {
    content: '';
    display: block;
    background-image: url(./img/common/ico-home-white.svg);
    width: 14px;
    height: 14px;
    background-size: contain;
  }

  .l-spnav-contact .c-top-contact {
    padding: 24px 24px 48px;
  }

  .l-spnav-contact .c-top-contact::before,
  .l-spnav-contact .c-top-contact::after {
    content: none;
  }

  .c-header-contact {
    display: none;
  }
}

@media (min-width: 769px) {
  .p-header {
    position: relative;
  }

  .c-header-top {
    display: block;
    width: auto;
    height: auto;
    border-bottom: none;
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 10;
  }

  .c-header {
    display: block;
    width: 100%;
    height: 88px;
    padding: 8px 8px 0 12px;
    background-color: var(--color-white);
    border-bottom: 4px solid var(--color-blue01);
    position: fixed;
    top: 0;
  }

  .l-header-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    position: relative;
  }

  .c-header-logo {
    opacity: 1;
    transition: var(--trans-opacity);
    position: absolute;
    top: 21px;
    left: 0;
  }

  .c-header-logo:hover {
    opacity: 0.7;
  }

  .c-header-logo--img {
    width: 198px;
    height: 37px;
  }

  .c-spnav-top {
    display: none;
  }

  .l-header-nav-inner {
    display: grid;
    justify-items: end;
    padding: 8px 0 0;
  }

  .c-header-subnav-list,
  .c-header-subnav-list li {
    display: flex;
    align-items: center;
  }

  .c-header-subnav-list:before,
  .c-header-subnav-list li::after {
    content: '';
    display: block;
    width: 1px;
    height: 8px;
    background-color: var(--color-gray04);
  }

  .c-header-subnav-list li a {
    padding: 0 16px;
    opacity: 1;
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 140%;
    transition: var(--trans-opacity);
    position: relative;
  }

  .c-header-subnav-list li a:hover {
    opacity: 0.5;
  }

  .c-header-navlist {
    display: flex;
    gap: 20px;
  }

  .c-header-navlist li {
    position: relative;
  }

  .c-header-nav-parent,
  .c-header-navlist li a {
    display: block;
    height: 100%;
    padding: 8px 0;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 200%;
    position: relative;
    transition: var(--trans-color-trans);
  }

  .c-header-navlist li:hover .c-header-nav-parent,
  .c-header-navlist>li>a:hover {
    color: var(--color-blue01);
    transform: translate(-2px, 2px);
  }

  .c-header-nav-parent {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
  }

  .c-header-nav-parent::after {
    content: '';
    display: block;
    width: 8px;
    height: 10px;
    background-image: url(./img/common/ico-headnav.svg);
    background-size: contain;
  }

  .l-header-nav-childrenarea {
    position: absolute;
    border-top: 8px solid transparent;
    top: calc(100%);
    left: -44px;
  }

  .c-header-childnav-list li a {
    background-color: var(--color-white);
    border-bottom: 1px dashed var(--color-gray04);
    padding: 16px 24px;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0.06em;
    transition: var(--trans-color);
    white-space: nowrap;
  }

  .c-header-childnav-list li a:hover {
    color: var(--color-blue01);
  }

  .c-header-childnav-list li:last-of-type a {
    border-bottom: none;
  }

  .c-header-contact {
    border: 1px solid var(--color-orange);
    border-radius: 2px;
  }

  .c-header-contact a {
    display: flex;
    align-items: center;
    width: 230px;
    border-radius: 2px;
    padding: 7px;
    background-color: var(--color-white);
    color: var(--color-orange) !important;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 200%;
    position: relative;
    transition: var(--trans-bg-color-trans);
  }

  .c-header-contact a:hover {
    background-color: var(--color-orange);
    color: var(--color-white) !important;
    transform: translate(-4px, 4px);
  }

  .c-header-contact--pretxt {
    display: grid;
    place-content: center;
    width: 72px;
    height: 100%;
    border-right: 1px solid var(--color-orange03);
    font-weight: 700;
    font-size: 11px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .c-header-contact-main {
    display: grid;
    place-content: center;
    width: 158px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 100%;
    text-align: left;
  }

  .c-header-contact-main--txt {
    font-size: 12px;
    line-height: 120%;
    letter-spacing: 0.06em;
  }

  .c-header-contact--tel {
    font-family: var(--font-eng);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 120%;
  }

  .c-header-contact-main--time {
    font-family: var(--font-eng);
    font-weight: 700;
  }

  .c-header-contact-main--time .u-eng {
    margin-right: 4px;
  }

  .c-spbutton {
    display: none;
  }

  .l-spnav-contact {
    display: none;
  }
}

/* Footer
=====================================================================*/
.p-footer {
  background-color: var(--color-white);
  align-self: end;
}

.l-footer-inner {
  display: grid;
  padding: 0 0 24px;
  position: relative;
}

.l-footer-logoarea {
  display: grid;
  gap: 20px;
  padding: 0 24px;
}

.c-footer-logo--img img {
  width: 188px;
  height: 35px;
  object-fit: contain;
}

.c-footer-address {
  display: grid;
  gap: 8px;
}

.c-footer-address--address {
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 170%;
  text-align: left;
}

.c-footer-address--maplink {
  display: flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
}

.c-footer-address--maplink::before {
  content: '';
  display: block;
  width: 12px;
  height: 16px;
  background-image: url(./img/common/ico-map.svg);
  background-size: contain;
}

.c-footer-address--maplink a {
  display: block;
  width: fit-content;
  padding: 0 0 3px;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 160%;
  text-align: left;
  position: relative;
}

.c-footer-address--maplink a::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-black);
  position: absolute;
  bottom: 0;
  left: 0;
}

.c-copyright {
  display: grid;
  place-content: center;
  width: 100%;
  height: 28px;
  background-color: var(--color-gray01);
}

.c-copyright--txt {
  color: var(--color-gray03);
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 160%;
}

.c-footer-pagetop a {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 160%;
  white-space: nowrap;
  position: absolute;
  bottom: 25px;
  right: 24px;
}

.c-footer-pagetop a::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background-image: url(./img/common/ico-pagetop.svg);
  background-size: contain;
}

@media (max-width: 768px) {
  .l-footer-logoarea {
    order: 2;
  }

  .l-footer-navarea {
    order: 1;
    margin: 0 0 80px;
  }

  .c-footer-homelink a,
  .c-footer-nav--title {
    display: block;
    width: 100%;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-gray04);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 120%;
  }

  .c-footer-homelink a {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .c-footer-homelink a::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url(./img/common/ico-home.svg);
    background-size: contain;
  }

  .c-footer-nav--title {
    display: grid;
    justify-content: start;
    align-items: center;
    position: relative;
    cursor: pointer;
  }

  .c-footer-nav--title::before,
  .c-footer-nav--title::after {
    content: '';
    display: block;
    width: 11px;
    height: 1px;
    background-color: var(--color-gray01);
    position: absolute;
    top: 50%;
    right: 24px;
  }

  .c-footer-nav--title::after {
    transform: rotate(90deg);
  }

  .is-open.c-footer-nav--title::after {
    display: none;
  }

  .l-footer-navlistarea {
    display: none;
  }

  .c-footer-navlist li a {
    display: block;
    padding: 16px 24px;
    background-color: var(--color-gray05);
    border-bottom: 1px solid var(--color-gray04);
    color: var(--color-gray01);
    font-weight: 400;
    font-size: 13px;
    line-height: 160%;
    letter-spacing: 0.06em;
  }
}

@media (min-width: 769px) {
  .l-footer-inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 48px 80px 36px 48px;
  }

  .l-footer-logoarea {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
  }

  .c-footer-logo {
    display: grid;
    gap: 24px;
  }

  .c-footer-logo a {
    display: block;
    opacity: 1;
    transition: var(--trans-opacity);
  }

  .c-footer-logo a:hover {
    opacity: 0.7;
  }

  .c-footer-homelink {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .c-footer-homelink::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-image: url(./img/common/ico-home.svg);
    background-size: contain;
  }

  .c-footer-logo--img img {
    width: 284px;
    height: 53px;
  }

  .c-footer-homelink a {
    display: block;
    position: relative;
  }

  .c-footer-homelink a:hover {
    opacity: 0.7;
  }

  .c-footer-homelink a::before {}

  .c-footer-homelink a::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    opacity: 1;
    background-color: var(--color-gray05);
    transition: var(--trans-opacity);
    position: absolute;
    bottom: -6px;
    left: 0;
  }

  .c-footer-homelink a:hover:after {
    opacity: 0;
  }

  .c-footer-address--maplink a::after {
    transition: var(--trans-trans);
    transform-origin: top right;
  }

  .c-footer-address--maplink a:hover::after {
    transform: scaleX(0);
  }

  .c-footer-homelink a {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 120%;
  }

  .c-footer-address {
    gap: 12px;
  }

  .c-footer-address--address {
    font-size: 14px;
  }

  .c-footer-address--maplink {
    gap: 6px;
  }

  .c-footer-address--maplink a {
    font-size: 11px;
    transition: var(--trans-opacity);
  }

  .c-footer-address--maplink a:hover {
    opacity: 0.5;
  }

  .c-copyright {
    display: grid;
    align-items: center;
    justify-content: end;
    padding: 0 8px;
  }

  .c-copyright--txt {
    color: var(--color-gray03);
    font-size: 10px;
    letter-spacing: 0.06em;
    line-height: 160%;
  }

  .c-footer-pagetop a {
    font-size: 13px;
    position: absolute;
    bottom: 33px;
    right: 32px;
  }

  .l-footer-navarea {
    display: flex;
    gap: 32px;
    padding: 16px 0 120px;
  }

  .c-footer-nav {
    height: 100%;
    padding: 0 0 0 20px;
    border-left: 1px solid var(--color-gray05);
  }

  .c-footer-nav--title {
    font-weight: 700;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0.06em;
    text-align: left;
    margin: 0 0 16px;
    position: relative;
  }

  .c-footer-nav--title::before {
    content: '';
    display: block;
    width: 2px;
    height: 17px;
    background-color: var(--color-black);
    position: absolute;
    left: -20px;
    top: 0;
  }

  .c-footer-navlist {
    display: grid;
    gap: 12px;
  }

  .c-footer-navlist li a {
    font-weight: 400;
    font-size: 13px;
    line-height: 160%;
    letter-spacing: 0.06em;
    transition: var(--trans-opacity);
  }

  .c-footer-navlist li a:hover {
    opacity: 0.5;
  }

  .c-footer-pagetop {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .c-footer-pagetop a {
    transition: var(--trans-trans);
  }

  .c-footer-pagetop a:hover {
    transform: translateY(5px);
  }
}

/* Toppage
=====================================================================*/
/* MV */
.p-top-mv {
  width: 100%;
  padding: 0 0 8px;
}

.c-top-mv {
  margin: 0 0 8px;
  width: 100%;
  height: 62vh;
  min-height: 500px;
  background-image: url(./img/toppage/mv-sp.webp);
  background-size: cover;
  position: relative;
}

.l-top-mv-txtarea {
  position: absolute;
  bottom: 40px;
  left: 24px;
}

.c-top-mv--maintxt {
  display: block;
  margin: 0 0 20px;
  text-shadow: 0px 0px 8px 0px #00000014;
  color: var(--color-white);
  text-align: left;
  font-weight: 700;
  font-size: 32px;
  line-height: 140%;
  letter-spacing: 0.04em;
}

.c-top-mv-txtimg {
  display: inline-block;
  width: 132px;
  height: 48px;
  margin: 0 3px;
  color: transparent;
  background-size: contain;
  position: relative;
  top: 3px;
  white-space: nowrap;
}

.c-top-mv-txtimg::before,
.c-top-mv-txtimg::after {
  content: '';
  display: block;
  width: 132px;
  height: 48px;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
}

.c-top-mv-txtimg::before {
  background-image: url(./img/toppage/mv-txt-frame.svg);
}

.c-top-mv-txtimg::after {
  background-image: url(./img/toppage/mv-txt.svg);
  animation: push 1s 1s ease;
  animation-fill-mode: forwards;
}

.c-top-mv--subtxt {
  margin: 0 0 24px;
}

.c-top-mv--subtxt p {
  color: var(--color-white);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.c-mv-button {
  width: 196px;
}

.c-mv-button a {
  background-color: var(--color-blue01);
}

.c-mv-button .c-button--txt {
  color: var(--color-white);
}

@media (min-width: 769px) {
  .c-top-mv {
    height: calc(100vh - 88px);
    min-height: 540px;
    background-image: url(./img/toppage/mv-pc.webp);
  }

  .l-top-mv-txtarea {
    left: 80px;
    bottom: 80px;
  }

  .c-top-mv--maintxt {
    font-size: 58px;
  }

  .c-top-mv-txtimg {
    width: 239px;
    height: 81px;
    margin: 0 6px;
    top: 6px;
  }

  .c-top-mv-txtimg::before,
  .c-top-mv-txtimg::after {
    width: 239px;
    height: 81px;
  }

  .c-top-mv-txtimg::after {
    animation: push-pc 1s 1s ease;
    animation-fill-mode: forwards;
  }

  .c-top-mv--subtxt {
    margin-bottom: 32px;
  }

  .c-top-mv--subtxt p {
    font-size: 18px;
  }

  .c-mv-button {
    width: 222px;
    height: 56px;
    border: 1px solid transparent;
    transition: var(--trans-bordercolor);
  }

  .c-mv-button:has(a:hover) {
    border-color: var(--color-blue01);
  }

  .c-mv-button a {
    height: 56px;
    background-color: var(--color-blue01);
    transition: var(--trans-bg-color-trans);
  }

  .c-mv-button a:hover {
    background-color: var(--color-white);
  }

  .c-mv-button .c-button--txt {
    color: var(--color-white);
    transition: var(--trans-color);
  }

  .c-mv-button a:hover .c-button--txt {
    color: var(--color-blue01);
  }
}

.l-top-mv-slideimgarea {
  width: 100vw;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
}

.c-top-slideimglist {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  animation: scroll-left 20s linear infinite;
  animation-fill-mode: both;
}

.c-top-slideimglist li {
  width: calc((100vw - (8px * 2)) / 2.5);
}

.c-top-slideimglist li img {
  display: block;
  width: 100%;
  height: calc(96 * 100 / 375 * 1vw);
  object-fit: cover;
}

@media (min-width: 769px) {
  .c-top-slideimglist {
    animation: scroll-left 30s linear infinite;
    animation-fill-mode: both;
  }

  .c-top-slideimglist li {
    width: calc((100vw - (8px * 3)) / 4);
    max-width: 240px;
  }

  .c-top-slideimglist li img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
  }
}

@media (min-width: 1280px) {
  .c-top-slideimglist {
    animation: scroll-left 40s linear infinite;
  }

  .c-top-slideimglist li {
    width: calc((100vw - (8px * 5)) / 6);
  }
}

/* Common Inquiries */
.p-top-inquiries {
  background-color: #0085CC;
}

.c-top-inquiries {
  padding: 32px 0 40px;
  background-color: var(--color-white);
  background-image: url(./img/toppage/bg-check.webp);
  background-repeat: repeat;
  border-radius: 0 0 0 32px;
}

.c-top-inquiries .c-top-section-heading {
  margin-bottom: 24px;
}

.l-top-inquiries-peoplearea {
  display: grid;
  gap: 16px;
}

.c-top-inquiries-people {
  display: grid;
  grid-template-columns: 96px 1fr;
  width: 100%;
  height: auto;
  min-height: 172px;
  border-radius: 2px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray04);
  box-shadow: 0px 0px 6px 0px #00000014;
}

.l-top-inquiries-people-imgarea {
  display: grid;
  place-content: center;
  place-items: center;
  border-right: 1px solid var(--color-gray05);
}

.l-top-inquiries-people-imgarea {
  padding: 14px 0;
}

.top-inquiries-people--img {
  margin: 0 0 8px;
}

.top-inquiries-people--img img {
  width: 64px;
  height: 56px;
  object-fit: contain;
}

.c-top-inquiries-people--imgtxt {
  display: block;
  padding: 0 6px;
  border: 1px solid var(--color-gray03);
  font-weight: 700;
  font-size: 12px;
  line-height: 170%;
  letter-spacing: 0.06em;
  text-align: center;
}

.c-top-inquiries-people--txt {
  align-content: center;
  align-items: center;
  padding: 14px 16px;
}

@media (min-width: 769px) {
  .c-top-inquiries {
    padding: 32px 0 40px;
    border-radius: 0 0 0 60px;
  }

  .l-top-inquiries-inner {
    display: grid;
    grid-template-columns: 357px 1fr;
    align-items: center;
  }

  .l-top-inquiries-peoplearea {
    grid-template-columns: repeat(3, 1fr);
  }

  .c-top-inquiries-people {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .l-top-inquiries-people-imgarea {
    border-right: none;
    border-bottom: 1px solid var(--color-gray05);
  }

  .l-top-inquiries-people-imgarea {
    padding: 16px 0;
  }

  .top-inquiries-people--img {
    margin: 0 0 10px;
  }

  .top-inquiries-people--img img {
    width: 96px;
    height: 84px;
  }

  .c-top-inquiries-people--imgtxt {
    font-size: 14px;
  }

  .c-top-inquiries-people--txt {
    padding: 16px 32px 24px;
  }
}

.c-top-inquiries-upto {
  background: var(--grd-blue);
  padding: 56px 0 136px;
  overflow: hidden;
  position: relative;
}

.c-top-inquiries-upto::before {
  content: '';
  display: block;
  width: 220px;
  height: 252px;
  background-image: url(./img/toppage/bg-shape-sp.svg);
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
}

.c-top-inquiries-upto-heading {
  margin: 0 0 16px;
  color: var(--color-white);
  font-weight: 700;
  font-size: 23.5px;
  line-height: 150%;
  letter-spacing: 0.06em;
  text-align: left;
}

.c-top-inquiries-title--ex {
  display: inline-block;
  min-height: 22px;
  margin: 0 6px 4px 0;
  width: fit-content;
  background-color: var(--color-white);
  padding: 3px 6px 4px;
  border-radius: 1px;
  color: var(--color-blue01);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 120%;
  letter-spacing: 0.06em;
  text-align: center;
}

.c-top-inquiries-upto-heading .u-txt {
  display: inline-block;
}

.c-top-inquiries-upto-heading .u-small {
  display: block;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 120%;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

.c-top-inquiries-upto--txt p {
  color: var(--color-white);
  font-weight: 500;
}

@media (min-width: 769px) {
  .c-top-inquiries-upto {
    padding: 80px 0;
    overflow: hidden;
    position: relative;
  }

  .c-top-inquiries-upto::before {
    width: 700px;
    height: 409px;
    background-image: url(./img/toppage/bg-shape-pc.svg);
    background-size: contain;
  }

  .c-top-inquiries-upto-heading {
    font-size: 30px;
    line-height: 160%;
  }

  .c-top-inquiries-title--ex {
    min-height: 29px;
    margin-right: 8px;
    padding: 4px 10px 5px;
    font-size: 17px;
  }

  .c-top-inquiries-upto-heading .u-small {
    font-size: 17px;
    margin-bottom: 12px;
  }
}

/* Case Studies */
.p-top-studies {
  padding: 32px 0 40px 24px;
  background-color: var(--color-lightblue03);
  position: relative;
  overflow: hidden;
}

.p-top-studies::before,
.p-top-studies::after {
  content: '';
  display: block;
  width: 709px;
  height: 420px;
  background-image: url(./img/toppage/bg-drowing.webp);
  background-size: contain;
  position: absolute;
}

.p-top-studies::before {
  top: -83px;
  left: -167px;
}

.p-top-studies::after {
  bottom: 0;
  right: -100px;
}

.c-top-studies {
  padding: 28px 28px 32px;
  background-color: var(--color-white);
  border-radius: 12px 0 0 12px;
  box-shadow: 0px 0px 16px 0px #0000000A;
  position: relative;
  z-index: 1;
}

.c-top-studies-first {
  padding: 0 0 32px;
}

.c-top-studies-first--txt {
  margin: 0 0 20px;
}

.c-studies-list {
  display: grid;
  border-top: 1px solid var(--color-gray04);
}

.c-studies-list img {
  border-radius: 1px;
}

.c-studies-list-item a {
  display: block;
  height: 100%;
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--color-gray04);
}

.l-studies-list-titlearea {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0 0 8px;
}

.c-studies-list--title {
  padding: 0 0 6px;
  margin: 0 0 10px;
  border-bottom: 1px dashed var(--color-gray04);
  font-weight: 700;
  font-style: Bold;
  font-size: 13px;
  line-height: 140%;
  letter-spacing: 0.06em;
  text-align: left;
}

.c-studies-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.c-studies-category-list li {
  display: grid;
  place-content: center;
  width: fit-content;
  height: 18px;
  padding: 1px 4px;
  border-radius: 1px;
  border: 1px solid var(--color-gray04);
  background-color: var(--color-gray05);
  font-size: 10px;
  line-height: 160%;
  letter-spacing: 0.06em;
  text-align: center;
}

.c-studies--txt {
  gap: 12px;
  margin: 0 0 8px;
}

.c-studies--txt p {
  font-size: 12px;
}

.c-studies--button {
  display: grid;
  place-content: center;
  width: 100%;
  height: 41px;
  border-radius: 2px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray04);
}

.c-studies--button .c-button--txt {
  font-size: 12px;
}

.c-top-studies--button {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border: 1px solid var(--color-blue01);
}

.c-top-studies--button a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;
  height: auto;
  padding: 20px 25px;
  background-color: var(--color-blue01);
  border: none;
  line-height: 1.8;
  font-size: 14px;
  color: #FFF;
  letter-spacing: 0.05em;
  border-radius: 0;
}

.c-top-studies--button a>* {
  display: inline-block;
  color: #FFF;
}

@media (max-width: 768px) {
  .c-button--txt-left {
    min-width: 100%;
  }

  .c-button--txt-right {
    min-width: 100%;
    border: #FFF 1px solid;
    padding: 10px;
    text-align: center;
  }
}

@media (min-width: 769px) {
  .p-top-studies {
    display: grid;
    justify-content: end;
    padding: 64px 0 64px 24px;
  }

  .c-top-studies {
    padding: 48px 40px 48px 56px;
    border-radius: 60px 0 0 60px;
    min-width: calc(50vw + 512px);
    max-width: calc(50vw + 776px);
  }

  .l-top-studies-inner {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 230px 1fr;
    gap: 0 32px;
  }

  .c-top-studies--button {
    margin: 0 auto;
  }

  .c-top-studies--button a {
    padding: 25px 32px;
    font-size: 14px;
  }

  .c-top-studies-first {
    padding: 0;
  }

  .c-top-studies--button {
    width: 100%;
  }

  .c-studies-list {
    grid-template-columns: repeat(3, 1fr);
    border-left: 1px solid var(--color-gray04);
  }

  .c-studies-list-item:has(a:hover) {
    background-color: var(--color-blue01);
  }

  .c-studies-list-item a {
    padding: 12px 12px 16px;
    background-color: var(--color-white);
    border-right: 1px solid var(--color-gray04);
    transition: var(--trans-trans);
  }

  .c-studies-list-item a:hover {
    border-left: 1px solid var(--color-gray05);
    border-bottom: 1px solid var(--color-gray04);
    transform: translate(-4px, 4px);
    ;
  }

  .l-studies-list-titlearea {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .c-studies-list--img {
    margin: 0 0 8px;
  }

  .c-studies-list--title {
    padding-bottom: 8px;
    font-size: 15px;
  }

  .c-studies-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .c-studies-category-list li {
    height: 20px;
    padding: 2px 4px;
  }

  .c-studies--txt {
    gap: 13px;
    margin: 0;
  }

  .c-studies--txt p {
    font-size: 13px;
  }

  .c-studies--button {
    display: none;
  }
}

/* About Us */
.p-top-about {
  background-color: var(--color-lightblue03);
}

.c-top-about {
  padding: 28px 0 40px;
  background-color: var(--color-white);
  background-image: url(./img/toppage/bg-check.webp);
  background-repeat: repeat;
  border-radius: 0 32px 0 0;
}

.l-top-about-txtarea {
  display: flex;
  flex-direction: column;
  margin: 0 0 32px;
}

.c-top-about--txt {
  margin: 0 0 20px;
}

.l-top-about--img {
  margin-left: -25px;
}

.l-top-about--img img {
  width: 100%;
}

@media (min-width: 769px) {
  .c-top-about {
    padding: 98px 0;
    border-radius: 0 60px 0 0;
  }

  .l-top-about-inner {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 72px;
    min-height: 594px;
    align-items: center;
  }

  .l-top-about-txtarea {
    margin: 0;
  }

  .c-top-about--txt {
    margin-bottom: 32px;
  }

  .l-top-about--img {
    order: -1;
    margin-left: -80px;
  }

  .l-top-about--img img {
    width: 100%;
    height: 594px;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .c-top-about--button a {
    width: 196px;
  }
}

@media (min-width: 1280px) {
  .l-top-about--img {
    margin-left: calc(100% - 45vw);
  }

  .l-top-about--img img {
    object-position: 50% 50%;
  }
}

/* Our Strengths */
.p-top-strengths {
  padding: 28px 0 40px;
  background-color: var(--color-lightblue03);
  position: relative;
  overflow: hidden;
}

.p-top-strengths::after {
  content: '';
  display: block;
  width: 709px;
  height: 420px;
  background-image: url(./img/toppage/bg-drowing.webp);
  background-size: contain;
  position: absolute;
  top: -83px;
  left: -167px;
}

.p-top-strengths .l-contents-inner {
  position: relative;
  z-index: 1;
}

.p-top-strengths .c-top-section-heading {
  display: grid;
  justify-content: center;
  justify-items: center;
}

.c-top-strengths--txt {
  margin: 0 0 32px;
}

.l-top-strengths-list {
  display: grid;
  gap: 28px;
}

.c-top-strengths-item--num {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 5px;
  color: var(--color-blue01);
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: 0.06em;
  text-align: center;
}

.c-top-strengths-item--num::before {
  content: '[';
  font-size: 12px;
  padding: 0 8px 0 0;
}

.c-top-strengths-item--num::after {
  content: ']';
  font-size: 12px;
  padding: 0 0 0 8px;
}

.c-top-strengths-item--title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 15px;
  line-height: 170%;
  letter-spacing: 0.06em;
  text-align: center;
}

.c-top-strengths-item--img {
  margin: 0 0 10px;
}

@media (min-width: 769px) {
  .p-top-strengths {
    padding: 48px 0 72px;
  }

  .c-top-strengths--txt {
    margin-bottom: 48px;
  }

  .c-top-strengths--txt p {
    text-align: center;
  }

  .l-top-strengths-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .c-top-strengths-item--num {
    font-size: 18px;
  }

  .c-top-strengths-item--num::before {
    padding-left: 10px;
  }

  .c-top-strengths-item--num::after {
    padding-right: 10px;
  }

  .c-top-strengths-item--title {
    margin-bottom: 12px;
    font-size: 17px;
    white-space: nowrap;
  }

  .c-top-strengths-item--img {
    margin-bottom: 12px;
  }
}

/* Equipment & Materials */
.p-top-equipment {
  padding: 0 24px 40px 0;
  background-color: var(--color-lightblue03);
  position: relative;
  overflow: hidden;
}

.p-top-equipment::after {
  content: '';
  display: block;
  width: 709px;
  height: 420px;
  background-image: url(./img/toppage/bg-drowing.webp);
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: -100px;
}

.c-top-equipment {
  padding: 28px 0 40px;
  background-color: var(--color-white);
  border-radius: 0 12px 12px 0;
  padding: 28px 0 40px;
  box-shadow: 0px 0px 16px 0px #0000000A;
  position: relative;
  z-index: 1;
}

.c-top-equipment--txt {
  margin: 0 0 20px;
}

.l-top-equipment-buttonarea {
  display: grid;
  gap: 12px;
  margin: 0 0 32px;
}

@media (min-width: 769px) {
  .p-top-equipment {
    display: grid;
    justify-content: center;
    padding: 0 32px 64px 0;
  }

  .c-top-equipment {
    padding: 48px 56px 56px 56px;
    border-radius: 0 60px 60px 0;
    width: fit-content;
  }

  .l-top-equipment-inner {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 520px;
    padding: 0;
    gap: 48px;
    width: 100%;
  }

  .c-top-equipment--txt {
    margin-bottom: 32px;
  }

  .l-top-equipment-buttonarea {
    display: grid;
    grid-template-columns: repeat(2, 196px);
    gap: 16px;
    margin: 0;
  }

  .l-top-equipment-buttonarea .c-button a {
    width: 196px;
  }
}

@media (min-width: 1281px) {
  .p-top-equipment {
    padding: 0 80px 64px;
  }

  .c-top-equipment {
    padding: 48px 0 56px 0;
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    margin-right: -56px;
    padding-right: 56px;
  }

  .l-top-equipment-inner {
    min-width: 644px;
    max-width: 1440px;
  }
}

/* Contacts */
.p-top-contact {
  padding: 40px 24px;
  background: var(--grd-blue);
  width: 100%;
  height: fit-content;
  overflow: hidden;
}

.c-top-contact {
  display: grid;
  padding: 28px 28px 37px;
  gap: 24px;
  background-color: var(--color-white);
  box-shadow: 0px 0px 16px 0px #0000000A;
  position: relative;
  z-index: 1;
}

.c-top-contact::before,
.c-top-contact::after,
.c-top-contact--line {
  content: '';
  display: block;
  width: 2px;
  height: 400px;
  background-color: var(--color-blue02);
  transform: scaleY(0.5) rotate(45deg);
  transform-origin: bottom left;
  position: absolute;
}

.c-top-contact::before {
  bottom: 100%;
  left: 0;
}

.c-top-contact::after {
  bottom: 100%;
  left: 100%;
}

.c-top-contact--line {
  bottom: 0;
  left: 100%;
}

.c-top-contact-tel {
  width: 100%;
  border: 1px solid var(--color-gray04);
  padding: 12px 16px;
}

.c-top-contact-tel--title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid var(--color-gray04);
  padding: 0 0 8px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 160%;
}

.c-top-contact-tel--title::before {
  content: '';
  display: block;
  width: 12px;
  height: 14px;
  background-image: url(./img/common/ico-tel.svg);
  background-size: contain;
}

.c-top-contact-tel--num a {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-eng);
  font-weight: 900;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0.04em;
  text-align: center;
}

.c-top-contact-tel--txt {
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.06em;
  text-align: center;
}

.l-top-contact-buttonarea {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
}

.c-top-contact-mail,
.c-top-contact-form {
  border: 1px solid transparent;
  transition: var(--trans-bordercolor);
}

.c-top-contact-mail:has(a:hover),
.c-top-contact-form:has(a:hover) {
  border-color: var(--color-gray03);
}

.c-top-contact-mail a,
.c-top-contact-form a {
  display: grid;
  place-content: center;
  width: 100%;
  height: 70px;
  border-radius: 2px;
}

.c-top-contact-mail a {
  background-color: var(--color-blue01);
}

.c-top-contact-form a {
  background-color: var(--color-orange);
}

.c-top-contact-mail--txt,
.c-top-contact-form--txt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0.06em;
  text-align: center;
}

.c-top-contact-mail--txt::before,
.c-top-contact-form--txt::before {
  content: '';
  display: block;
  width: 19px;
  height: 19px;
  background-size: contain;
}

.c-top-contact-mail--txt::before {
  background-image: url(./img/common/ico-mail-white.svg);
}

.c-top-contact-form--txt::before {
  background-image: url(./img/common/ico-form-white.svg);
}

@media (min-width: 769px) {
  .p-top-contact {
    padding: 72px 80px;
  }

  .c-top-contact {
    display: grid;
    grid-template-columns: 484fr 460fr;
    gap: 48px;
    min-width: 644px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 56px 64px;
  }

  .l-top-contact-addressarea {
    display: grid;
    gap: 16px;
  }

  .c-top-contact-tel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    padding: 16px 0;
  }

  .c-top-contact-tel--title {
    border-bottom: none;
    border-right: 1px solid var(--color-gray04);
    padding: 0 5px;
    margin: 0;
  }

  .c-top-contact-tel--title::before {
    width: 22px;
    height: 22px;
  }

  .l-top-contact-telarea {
    display: grid;
    justify-content: center;
  }

  .c-top-contact-tel--num a {
    pointer-events: none;
    margin: 0 0 4px;
  }

  .c-top-contact-tel--txt {
    text-align: left;
  }

  .l-top-contact-buttonarea {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0;
    height: 70px;
  }

  .c-top-contact-mail a,
  .c-top-contact-form a {
    transition: var(--trans-trans);
    padding: 0 10px;
  }

  .c-top-contact-mail a:hover,
  .c-top-contact-form a:hover {
    transform: translate(-4px, 4px);
  }
}




/* 下層ページ修正
=====================================================================*/
@media (max-width: 768px) {
  * {
    box-sizing: border-box;
  }

  body {
    overflow-x: hidden;
    background-color: var(--color-white);
  }

  .sidearea {
    display: none;
  }

  #crumb {
    width: 100%;
    padding: 0 20px;
    background-color: transparent;
  }

  .page_navi,
  .page_navi_bnr {
    width: 100%;
  }

  .page_navi ul li {
    background: url(http://www.meihokako.co.jp/wp-content/themes/meihokako/img/common/icon05.gif) no-repeat 0 5%;
    text-align: left;
    font-size: 13px;
    line-height: 1.3;
  }

  .page_navi_bnr ul li {
    font-size: 13px;
    line-height: 1.3;
  }

  .page_navi_bnr ul li a {
    overflow: hidden;
  }

  .page_navi_bnr ul li a img,
  .page_navi_bnr ul li a:hover img {
    display: block;
    width: 200px;
  }

  .breadcrumbs {
    width: 100%;
    background-color: transparent;
  }

  .mv_wrap {
    width: 100%;
    height: calc(95 * 100 / 375 * 1vw);
  }

  .mv_area {
    height: calc(95 * 100 / 375 * 1vw);
  }

  .mv_area img {
    width: auto;
    height: 100%;
  }

  .content_wrap {
    width: 100%;
    overflow: auto;
  }

  .content {
    width: 100%;
    padding: 0 24px;
    background-color: transparent;
    float: none;
  }

  .secwrap01,
  .secwrap02,
  .secwrap03 {
    width: 100%;
    background: none;
    padding: 0;
  }

  .case_area_col01,
  .case_area_col02,
  .case_area_col03,
  .case_area_col01_f,
  .case_area_col02_f,
  .case_area_col03_f,
  .case_area_col01_f:hover,
  .case_area_col02_f:hover,
  .case_area_col03_f:hover {
    background: none;
    float: none;
    margin-bottom: 40px;
  }

  .sec,
  .sec02 {
    width: 100%;
    padding: 0;
  }

  .sec img,
  .sec02 img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .sec_gray {
    width: 100%;
  }

  .case_img,
  .case_area .case_img,
  .ig_img,
  .ig_mimg {
    width: 100%;
    height: auto;
  }

  .case_img img,
  .case_area .case_img img,
  .ig_img img,
  .ig_mimg img {
    width: 100%;
    height: auto;
  }

  #itemGalleryWrap,
  #itemGallery,
  #itemGallery ul,
  .itemPic {
    width: 100%;
  }

  .col2,
  ul.col2,
  .col3,
  ul.col3 {
    width: 100%;
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  ul.col2 li,
  ul.col3 li {
    margin-bottom: 20px;
  }

  .col2 li a img,
  .col3 li a img,
  .col2 li a:hover img,
  .col3 li a:hover img {
    width: 200px;
  }

  .l400,
  .r270,
  .l270,
  .r400,
  .l360,
  .r310,
  .r360,
  .l310 {
    width: 100%;
    float: none;
  }

  .l310+.r360,
  .l360+.r310 {
    margin-top: 20px;
  }

  .r310 img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 20px;
  }

  .link_bnr_area {
    width: 100%;
  }

  .ul.col2,
  ul.col2 li {
    width: 100%;
  }

  .h1_01,
  .h2_01,
  .h2_02,
  .h2_03,
  .h2_04,
  .h2_05,
  .h2_06,
  .h2_06_01,
  .h2_07,
  .h3_01,
  .h3_02,
  .h3_03 {
    width: 100%;
    box-sizing: border-box;
  }

  .h1_01 {
    display: grid;
    align-items: center;
    background: none;
    padding-left: 10px;
    margin-bottom: 22px;
    border-left: 5px solid var(--color-blue01);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0%;
  }

  .h2_01 {
    background: none;
    height: auto;
    line-height: 1.3rem;
    padding: 8px 2px 6px 2px;
    border-top: 2px solid var(--color-blue01);
    border-bottom: 1px solid var(--color-gray04);
  }

  .h3_02 {
    padding-left: 24px;
    background-position: 2px 0;
  }

  .h2_img,
  .col3_img {
    width: 100%;
  }

  .col3_text {
    width: 100%;
  }

  .sec_caseimg {
    width: 100%;
  }

  .sec_caseimg p {
    width: 100%;
  }

  .sec_caseinfo {
    width: 100%;
  }

  .sec_caseinfo table {
    width: 100%;
  }

  .sec_fqWrap,
  .sec_fq,
  .sec_answer {
    width: 100%;
  }

  .sec_fqWrap {
    padding: 0;
  }

  .case_area,
  .case_voice,
  .case_info,
  .case_area_col01,
  .case_area_col02,
  .case_area_col03,
  .case_area_col01_f,
  .case_area_col02_f,
  .case_area_col03_f {
    width: 100%;
  }

  .cate_area_inner,
  .cate_area {
    width: 100%;
  }

  .contact_tel,
  .contact_navi_area,
  .contact_tel,
  .contact_btn_area {
    width: 100%;
    float: none;
  }

  .sec:has(.profileTable),
  .sec:has(.historyTable),
  .sec:has(.materialTable) {
    width: 100%;
    overflow-x: scroll;
  }

  .materialTable {
    width: 100%;
  }

  .materialTable th {
    width: 120px;
    font-size: 12px;
  }

  .materialTable .title01 th {
    width: auto;
  }

  .materialTable td {
    font-size: 12px;
  }

  .link_bnr {
    margin: 0 0 20px;
  }

  .link_bnr li a img {
    display: block;
    width: 200px;
    height: 40px;
  }

  .link_bnr li a:hover img {
    width: 200px;
  }

  .pertain_case ul {
    display: grid;
    width: 100%;
  }

  .pertain_case li {
    width: 100%;
    float: none;
    text-align: left;
  }

  .pertain_case li a {
    width: 100%;
  }

  #itemGalleryWrap {
    width: 100%;
  }

  #itemGallery {
    width: 100%;
  }

  #itemGallery img {
    width: 100%;
  }

  #itemGallery ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 20px 0 0;
    text-align: left;
    float: none;
  }

  #itemGallery ul li {
    margin: 0;
  }

  .itemPic {
    width: 100%;
    height: auto;
    float: none;
    text-align: center;
    padding: 0;
    border-radius: 1px;
  }

  .flow_navi {
    width: 100%;
    background: none;
  }

  .flow_navi li.first,
  .flow_navi li {
    width: 33%;
    margin: 0 0 10px 0;
    padding: 0 15px 0 0;
    background: url(img/flow/flow_bg.gif) 0 50% no-repeat;
  }

  .flow_navi li:last-child {
    background: none;
  }
}

.h3_05 {
  margin: 0 0 16px;
  padding: 0 0 0 40px;
  position: relative;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  position: relative;
}

.h3_05::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background-color: var(--color-blue01);
  position: absolute;
  top: 4px;
  left: 0;
}

.case_list {
  display: grid;
  gap: 12px;
  width: 100%;
  margin: 0 0 20px;
}

.case_list li {
  display: flex;
  gap: 24px;
  background-color: var(--color-lightblue03);
  align-items: start;
  padding: 16px;
  border-radius: 2px;
}

.case_list_num {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #138CCE;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  position: relative;
}

.case_list_num::before {
  content: '';
  width: 4px;
  height: 4px;
  background-color: var(--color-blue01);
  border-radius: 100%;
}

.case_list_num::after {
  content: '';
  display: block;
  width: 1px;
  height: 12px;
  background-color: var(--color-blue02);
  position: absolute;
  top: 2px;
  right: -11px;
}

.case_list_txt {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0%;
}

strong.strong {
  font-weight: 600;
}

.case_txt {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

.h2_08 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 4px 14px 0;
  font-size: 15px;
  color: #333333;
  font-weight: bold;
  line-height: 40px;
  letter-spacing: 0.05em;
  text-align: left;
  background-color: var(--color-lightblue03);
  border-top: 5px solid var(--color-blue01);
  border-left: 2px solid var(--color-gray04);
  border-right: 2px solid var(--color-gray04);
  border-bottom: 1px solid var(--color-gray04);
}

.h2_08::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -2px;
  border: 3px solid var(--color-blue01);
  border-radius: 100%;
}

.col3-imgarea {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 40px;
}

.col3-imgarea img {
  display: block;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .h3_05 {
    margin-bottom: 16px;
    padding-left: 30px;
    font-size: 15px;
    line-height: 1.5;
  }

  .h3_05::before {
    top: 10px;
    left: 0;
  }

  .case_list li {
    align-items: center;
  }

  .case_list_num::after {
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    background-color: var(--color-blue02);
    position: absolute;
    top: 2px;
    right: -11px;
  }

  .case_list_txt {
    font-size: 300;
  }

  .case_txt {
    font-weight: 300;
  }

  .col3-imgarea img {
    height: 120px;
  }
}

.mt40 {
  margin-top: 40px;
}

.h2_09 {
  display: grid;
  place-content: center;
  width: 100%;
  height: 36px;
  margin: 0 0 20px;
  background-color: var(--color-blue01);
  color: var(--color-white);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

.case_sort_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.case_sort_list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--color-gray04);
  height: 35px;
  text-decoration: none;
  color: #333333;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

.case_sort_list li a::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin-bottom: 5px;
  border: 1px solid var(--color-blue01);
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}

.case_sort_list li a:hover {
  opacity: 0.7;
}

.case_detail_area {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 240px;
}

.cate_area {
  border: none;
  padding: 0 15px;
}

.case_category_list,
.cate_area {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
}

.case_category_list li,
.cate_area_inner {
  display: grid;
  place-content: center;
  width: fit-content;
  height: 18px;
  padding: 0 4px;
  border-radius: 1px;
  border: 1px solid var(--color-gray04);
  background-color: var(--color-gray05);
  font-family: var(--font-jp);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

.case_detail_txt p {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .cate_area {
    padding: 0;
  }

  .case_detail_area {
    grid-template-columns: 1fr;
  }

  .case_sort_list {
    grid-template-columns: repeat(2, 1fr);
  }

  .inquiryTable {
    display: block;
    width: 100%;
  }

  .inquiryTable tbody,
  .inquiryTable tr {
    display: block;
    width: 100%;
  }

  .inquiryTable th {
    display: block;
    width: 100%;
    padding: 10px 15px;
  }

  .inquiryTable td {
    display: block;
    width: 100%;
    padding: 15px 15px;
  }

  .inquiryTable .must {
    width: auto;
  }

  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form textarea {
    width: 100% !important;
    padding: 5px 10px;
    font-size: 16px;
  }

  .case_area {
    display: grid;
    gap: 10px;
  }
}

@media (min-width: 769px) {
  .case_area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 0;
  }

  .case_area_col {
    border-right: var(--color-gray04) 1px solid;
  }

  .case_area_col:nth-of-type(3n) {
    border-right: none;
  }
}