@charset "UTF-8";

/* =========================================================
   Child Responsive Overrides
   目的：親テーマのブレイクポイント設計を上書き
   基準：1024 / 768 / 485
========================================================= */

/* ======================================================================
   [PARENT THEME DEPENDENCY]
   - story_tcd041 固定（親テーマのDOM/クラス構造・既存JS挙動前提）
   - header / global-nav / signage / breadcrumb / content_inner など
====================================================================== */
@media only screen and (min-width: 767px) {
  a[href^='tel:'] {
    pointer-events: none;
  }
}

@media only screen and (max-width: 1200px) {
  .header-bar {
    height: 55px;
    background: var(--color-white);
    border: none;
    box-shadow: none;
  }

  .logo-image {
    height: 55px;
    left: 20px;
  }

  .global-nav-button {
    border: none;
    background-color: var(--color-sub);
    line-height: 55px;
    height: 55px;
    width: 55px;
  }

  .global-nav-button::before {
    color: var(--color-white);
  }

  .global-nav>ul>li>a {
    height: 50px;
    margin: 0 auto !important;
    line-height: 50px !important;
    border-top: 1px solid var(--color-gray);
    font-size: 1em;
  }

  .global-nav>ul>li.global-menu-home>a {
    display: block;
    border: none;
  }

  .global-nav, .header-bar-fixed .global-nav {
    top: 55px;
    max-width: 400px;
    right: 0;
  }

  .global-nav a {
    color: var(--color-text) !important;
  }

  .global-nav>ul>li.global-menu-other>a::after {
    display: none;
  }

  .global-nav>ul>li.global-menu-contact>a {
    border: none;
  }

  .global-nav .menu-item-has-children>a span::before {
    color: var(--color-text);
  }

  .global-nav>ul>li>a:before {
    display: none;
  }

  .global-nav>ul>li.global-menu-contact>a::after {
    position: relative;
    width: auto;
    display: inline-block;
    bottom: 0;
    margin-left: 1em;
  }

  .global-nav .sub-menu a {
    width: 100%;
    font-size: 1em;
    color: var(--color-white) !important;
  }

  .global-nav .sub-menu {
    left: 0;
  }

  .content02-inner {
    padding: 0;
    width: 84%;
  }

  .inner {
    width: 84%;
  }
}

@media only screen and (max-width: 991px) {
  .top-slider, .header-youtube {
    height: auto;
  }

  .breadcrumb-wrapper .inner, .main>.inner, .footer .inner {
    width: 84%;
    padding: 0;
  }
}

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

  /* content02（既存ブロックに合わせて調整） */
  .content02-content {
    width: 100%;
    margin: 0 auto 3em;
    font-size: 1em;
  }

  .content02-content:last-of-type {
    margin-bottom: 0;
  }

  .content02-inner {
    font-size: 1em;
  }

  .content02-button {
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: 1em;
  }

  .content02::before {
    height: 70px;
  }

  /* front-third */
  .front-third {
    padding: 70px 0 0;
  }

  .third-box {
    width: 100%;
    margin-bottom: 70px;
  }

  .front-third-text {
    width: 84%;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .front-third-text-inner {
    max-width: unset;
  }

  .front-third-img {
    width: 92%;
    margin: 2.5em auto 0 0 !important;
  }

  .third-box:nth-of-type(even) .front-third-img {
    margin: 2.5em 0 0 auto !important;
  }

  /* セクション余白 */
  #content01 {
    padding: 70px 0;
  }

  .content02 {
    padding: 0 0 70px;
  }

  .front_second_inner {
    padding: 70px 0;
    width: 100%;
  }

  .front_topics {
    padding: 70px 0;
  }

  .front_topics::before {
    height: 140px;
  }

  section.footer__contact {
    padding: 50px 0;
  }

  /* ファーストビュー下2カラム */
  .front_inner-text {
    width: 100%;
    margin: 0 auto 2em;
  }

  .front_inner-img {
    width: 100%;
  }

  footer {
    padding: 70px 0 120px;
    font-size: 0.9em;
  }

  .post-content a[href^='tel:'] {
    color: var(--color-text);
  }
}

@media only screen and (max-width: 767px) {
  .pagetop a {
    width: auto;
    height: auto;
  }

  .pagetop a::before {
    font-size: unset;
    width: 1px;
    height: 40px;
  }

  .article03-content {
    padding: 1em 1.5em 1.5em;
  }

  .top-blog {
    margin: 0px 0 -1em auto;
  }

  .article03 {
    width: calc((100% / 2) - 0.5em);
    margin-bottom: 1em;
    margin-right: 0;
    background: none;
  }

  .article03:nth-of-type(odd) {
    margin-right: 1em;
  }

  .top-blog::before {
    height: calc(100% - 1em);
  }

  p.copyright {
    height: auto;
  }
}

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

  .top-slider-wrapper {
    width: 100%;
  }

  .scroll-box {
    display: none;
  }

  a.footer_but:last-of-type {
    margin-bottom: 0;
  }

  .post-content td, .post-content th {
    display: block;
    width: 100%;
  }

  .post-content th {
    padding-right: 0;
    padding-bottom: 0;
  }

  .post-content td {
    padding-top: 0.25em;
  }

  .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
    text-align: left;
    padding: 10px 15px;
  }

  .flow-box::after {
    width: 60px;
    height: 60px;
    line-height: 60px;
  }

  .flow-box::before {
    left: 29px;
  }

  .flow-box {
    padding-left: 90px;
  }

  .top-blog {
    width: calc(100% - 4em);
    padding-left: 2em;
    margin: 0 0 0 auto;
  }

  .article03, .article03:nth-of-type(odd) {
    width: 100%;
    margin: 0 auto 1em;
  }

  .article03:last-of-type {
    margin-bottom: 0;
  }

  .top-blog::before {
    height: 100%;
  }

  a.footer_but {
    width: 100%;
    margin: 0 auto 1.5em;
  }

  a.footer_but:last-of-type {
    margin-bottom: 0;
  }

  .footer_about_inner {
    width: 100%;
    padding: 0;
    margin: 0 auto 2em;
  }

  .footer-menu {
    width: 100%;
    max-width: unset;
    padding: 0;
  }

  p.copyright {
    position: relative;
    text-align: center;
    margin: 4em auto 0;
    font-size: 0.9em;
  }
}

@media only screen and (max-width: 1200px) {
  .signage {
    height: auto;
  }
}

@media only screen and (max-width: 991px) {
  .content_inner {
    padding: 60px 0 70px;
  }
}

@media only screen and (max-width: 767px) {
  .post-content p {
    margin-bottom: 1.5em;
  }

  .signage-title {
    font-size: 1.8em;
  }

  .breadcrumb-wrapper {
    height: auto;
  }
}

@media only screen and (max-width: 767px) {
  .post-header {
    margin: 0 auto 2em;
  }
}

/* ====================================================================== */
@media only screen and (max-width: 768px) {
  .content02-item-inner {
    padding: 0;
  }
}

@media only screen and (max-width: 485px) {
  .header-bar-fixed~.top-slider-wrapper {
    width: 100%;
  }

  .front-main-box-inner h2 {
    font-size: 1.4em;
  }

  .front-main-box-inner h3 {
    font-size: 1em;
  }

  .top-slider-wrapper::after {
    opacity: 0.4;
  }
}

.dp-footer-bar a {
  color: var(--color-white);
}

[class^="icon-"], [class*=" icon-"] {
  font-weight: var(--font-bold);
}

.dp-footer-bar-icon::before {
  margin-bottom: 0.25em;
}

/* tablet〜: 1カラム */
@media (max-width: 1024px) {
  .feature-3col {
    grid-template-columns: 1fr;
    gap: 2em;
  }
}


@media (max-width: 1024px) {
  .service-2col {
    grid-template-columns: 1fr 46%;
  }
}

@media (max-width: 768px) {
  .service-2col {
    grid-template-columns: 1fr;
    gap: 2em;
    margin-top: 3em;
  }

  .service-2col.is-reverse {
    direction: ltr;
  }
}

.service-note-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin: 4em auto 0;
}

.service-note__title {
  margin: 0 0 .8em;
  font-size: 1.1em;
}

.service-note__text {
  margin: 0;
  line-height: 1.9;
}

/* タブレット以降は1カラム */
@media (max-width: 768px) {
  .service-note-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .service-subcols {
    grid-template-columns: 1fr;
    gap: 1.2em;
  }
}

.greeting_intro-img {
  width: 40%;
  box-sizing: border-box;
}

.greeting_intro-title {
  width: calc(60% - 4em);
  margin-left: 4em;
}

.greeting_intro {
  align-items: center;
}

.greeting_intro-title h2 {
  padding: 0;
  margin: 0;
  font-size: 1.4em;
  border: none;
}

.greeting_intro-title h2::after {
  display: none;
}

.greeting_intro-title h3 {
  margin-top: 2em;
  border: none;
  padding: 0;
  font-size: 1em;
  margin-bottom: 0;
  color: var(--color-text);
}

span.greeting_intro-name {
  display: block;
  font-size: 0.8em;
  color: var(--color-primary);
}

.greeting-text {
  margin: 4em auto 0;
}

@media only screen and (max-width: 485px) {
  .greeting_intro-img {
    width: 100%;
  }

  .greeting_intro-title {
    width: 100%;
    margin: 2em auto 0;
  }

  .greeting-text {
    margin-top: 3em;
  }
}

@media only screen and (max-width: 485px) {
  .contact-intro {
    text-align: left;
  }
}