/*
 Theme Name: Xeory child
 Template: xeory_extension   
 Author: Your Name
 Version: 1.0.0
*/

.home {
  /* margin-top: -30px; */
  main {
    margin-top: 120px;
    margin-bottom: 120px;
  }
  font-family: "Noto Sans JP", sans-serif;
  div#wpadminbar {
    display: none !important;
  }
  /* header, */
  /* .hero  */
  /* .works-section */
  /* .newly-open-plan {
    display: none !important;
  } */
  a {
    text-decoration: none;
    &:hover {
      text-decoration: none;
    }
  }
}

body {
  background: none;
}
body:not(.home) {
  .header__logo-wrapper {
    opacity: 1 !important;
    transform: none !important;
    top: 20%;
  }
  @media (max-width: 430px) {
    .header__logo-wrapper {
      top: 18px !important;
    }
  }
  .header__logo-link {
    display: inline !important;
  }
}

.post-cta {
  display: none;
}
/* 固定ページ */
.page:not(.home) {
  background: linear-gradient(
    to right,
    #d3e3eb 0%,
    #ffffff 25%,
    #ffffff 75%,
    #d3e3eb 100%
  );
}
.page,
.archive {
  .title-wrap {
    height: 28vw;
    padding-top: 8%;
    .pt {
      font-size: clamp(18px, 3.333vw, 30px);
    }
    @media (width <= 430px) {
      min-height: 240px;
      padding-top: 21%;
      h1 {
        margin-top: 0px;
        margin-bottom: 0px;
      }
    }
  }
}
.page-main {
  margin-top: 0px;
  margin-bottom: 120px;
  /* position: relative;
  &::after {
    content: "";
    width: 100%;
    height: 23vw;
    background: linear-gradient(#ffffff, #0099d2);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    padding: 24px;
    padding-top: 5%;
  } */
}
.archive {
  .a-in {
    display: flex;
    gap: 24px;
    padding: 0 24px;
    margin-top: 32px;
    @media (width <= 1023px) {
      flex-direction: column;
    }
    @media (width <= 430px) {
      padding: 0 8px;
    }
  }
  main {
    margin-bottom: 200px;
  }
  #side,
  .side-widget-area {
    min-height: unset !important;
  }
  #side {
    position: relative;
    z-index: 10;
    @media (width <= 430px) {
      margin-bottom: 0px;
      .widget_categories {
        margin-bottom: 0px;
        padding-bottom: 0px;
      }
    }
  }
  ul.page-numbers {
    margin-top: 120px;
    @media (width <= 430px) {
      margin-top: 40px;
    }
  }
  h3 {
    margin-top: 12px;
    font-weight: 900;
  }
  .post-list {
    .post-list__inner {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4rem;
      @media (width <= 430px) {
        gap: 2rem 4rem;
      }
      a {
        color: black;
        text-decoration: none;
      }
    }
  }

  .post-card {
    /* border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); */
    overflow: hidden;

    .post-list__link {
      display: flex;
      flex-direction: column;
      height: 100%;
      text-decoration: none;
    }

    .post-card__thumb {
      /* padding: 1.25rem; */

      img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0.75rem;
        aspect-ratio: 45 / 25;
        object-fit: cover;
      }
    }

    .post-card__meta {
      display: flex;
      justify-content: space-between;
      padding-top: 12px;
      span.post-card__category {
        background-color: #00c1f8;
        color: white;
        padding: 2px 4px;
        border-radius: 4px;
      }
    }
    .post-list__meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 1.25rem 0;
      font-size: 0.875rem;
      color: #5a627d;

      .post-card__category {
        font-weight: 700;
      }

      .post-card__date {
        opacity: 0.7;
      }
    }

    .post-list__title {
      padding: 0.5rem 1.25rem 1.5rem;
      font-size: 1rem;
      line-height: 1.6;
      color: #14213d;
    }
  }

  /* タブレット */
  @media (max-width: 1024px) {
    .post-list {
      .post-list__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }

  /* スマホ */
  @media (max-width: 640px) {
    .post-list {
      .post-list__inner {
        grid-template-columns: 1fr;
      }
    }
  }
}
.archive:not(.post-type-archive-work_list) {
  #content {
    padding-top: 80px;
  }
  .wrap {
    margin-bottom: 60px;
  }
}
.archive,
.post-header {
  padding: 0px;
}
.single {
  #content {
    width: 100%;
    padding-bottom: 100px;
  }
  article {
    margin-bottom: 74px;
    @media (width <= 430px) {
      border: none;
      margin-bottom: 0px;
    }
  }
  .p-meta-o {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    ul {
      list-style: none;
      margin: 0px;
      padding-left: 0px;
      li {
        color: #3b3b3b;
      }
    }
    .cat-name {
      background-color: #0099d2;
      color: white;
      padding: 4px;
      border-radius: 4px;
    }
  }
  #main {
    .main-inner {
      margin-right: 0px;
    }
  }
  .wrap {
    width: clamp(320px, 98%, 1440px);
    display: flex;
    gap: 10px;
    overflow: hidden;
    @media (width <= 1024px) {
      flex-direction: column;
      margin-inline: auto;
    }
    &::after {
      display: none;
    }
  }
  .post-content {
    font-size: 18px;
    padding-bottom: 20px;
    @media (width <= 430px) {
      padding: 20px 12px;
    }
    p {
      @media (width <= 430px) {
        font-size: 16px;
      }
    }
    h2 {
      font-size: clamp(20px, 1.944vw, 28px);
      border: none;
      font-weight: bold;
      background-color: #00c1f8;
      font-family: "Meiryo", "メイリオ", sans-serif;
      color: white;
    }
    h3 {
      font-size: clamp(18px, 1.667vw, 24px);
      border: none;
      font-weight: 900;
      background: #0355c2;
      border: none;
      color: white;
      font-weight: 900;
      padding-left: 8px;
      padding-top: 12px;
      padding-bottom: 12px;
    }
    h4 {
      color: #0355c2;
      font-size: 18px;
    }
    h5 {
      font-weight: bold;
      font-size: 16px;
      color: #67c0f6;
    }
  }
}

.single {
  .title-wrap {
    padding-top: 9.5%;
    @media (width <= 430px) {
      padding-top: 12.5%;
      min-height: 250px;
    }
    h1 {
      font-size: clamp(22px, 3.59vw, 50px);
    }
  }
}

.post-type-archive-work_list,
.page {
  .post-content {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 6%;
      right: 0;
      width: 30vw;
      max-width: 300px;
      transform: translateY(-50%);
      background: url("/wp-content/themes/xeory_extension_child/img/bg3.png")
        no-repeat;
      background-size: cover;
      aspect-ratio: 56 / 210;
    }
    &::after {
      content: "";
      position: absolute;
      top: 33%;
      left: 0;
      width: 30vw;
      max-width: 300px;
      transform: translateY(-50%);
      background: url("/wp-content/uploads/2025/11/bg_overlay2.png") no-repeat;
      background-size: cover;
      aspect-ratio: 43 / 100;
      z-index: -1;
    }
  }
}

.title-wrap {
  width: 100%;
  height: 26vw;
  min-height: 240px;
  background: linear-gradient(#ffffff, #0099d2);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
  padding: 5%;
  padding-top: 5%;
  .pt {
    font-family: "Poiret One", sans-serif;
    font-size: clamp(20px, 12vw, 60px);
    color: white;
  }
  h1 {
    font-family: "M PLUS 1p" !important;
    font-size: clamp(28px, 5.333vw, 60px);
    color: white;
    font-weight: 700;
    letter-spacing: 2px;
  }
}

.single,
.page {
  .post-meta-area {
    border-top: 1px solid #e5e5e5;
  }
}
#side {
  margin-bottom: 50px;
  z-index: 2;
  h2.wp-block-heading {
    font-size: 24px;
    background-color: #00c1f8;
    color: white;
    padding: 12px;
  }
  .widget_block {
    &.side-widget {
      margin-bottom: 12px;
      padding-bottom: 0px;
    }
  }
  @media (width <= 430px) {
    .side-widget {
      margin-bottom: 0px;
      padding-bottom: 0px;
    }
  }
}
.cbtn {
  width: clamp(240px, 80%, 400px);
  margin-inline: auto;
  border-radius: 32px;
  :hover {
    opacity: 0.8;
  }
  .wp-block-button {
    width: 100%;
  }
  a {
    background-color: #ffffff00;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 16px;
      right: 24px;
      top: calc((100% - 16px) / 2);
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  &.c-form-btn {
    text-align: center;
    background: none;
    position: relative;
    margin-top: 40px;
    input {
      border-radius: 24px !important;
      background: #d6ff14;
      color: #07297f !important;
      font-weight: 900;
    }
    &::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 16px;
      right: 24px;
      top: 18px;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url("/wp-content/themes/xeory_extension_child/img/button-icon2.png");
    }
  }
}
.btn-a {
  background: #d6ff14;
  color: #07297f !important;
  a {
    color: #07297f !important;
  }
  a::after {
    background-image: url("/wp-content/themes/xeory_extension_child/img/button-icon2.png");
  }
}
.btn-b {
  background: linear-gradient(90deg, #00c1f8 0%, #00aee4);
  a {
    color: #ffffff !important;
  }
  a::after {
    background-image: url("/wp-content/themes/xeory_extension_child/img/button-icon.png");
  }
}
.b_btn {
  padding: 18px;
  text-align: center;
  position: relative;
  border-radius: 32px;
  z-index: 5;
  a {
    position: unset;
    z-index: 5;
	  &:hover{
		  text-decoration: none;
	  }
  }
}

.hb {
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0% 100%);
  background-color: #0156c3;
  width: fit-content;
  padding-right: 53px;
  color: white;
  padding: 4px;
  padding-right: 40px;
}

/* 見出しなどパーツ */

.pb,
.mce-content-body {
  position: relative;
  padding-bottom: 120px;
  h2 {
    font-size: 28px;
    border: none;
    font-weight: bold;
    padding-left: 12px;
    &.h2a {
      color: #00c1f8;
      font-family: "Meiryo", "メイリオ", sans-serif;
      background-color: unset;
    }
    &.h2b {
      background-color: #00c1f8;
      color: white;
    }
  }

  h3 {
    font-size: 24px;
    border: none;
    font-weight: 900;
    background: #0355c2;
    color: white;
    &.h3b {
      border: none;
      color: #0355c2;
      font-weight: 900;
      background: rgba(255, 255, 255, 0);
    }
    .h3c {
      background-color: #00c1f8;
      color: white;
    }
    &:has(.h3c) {
      background: rgba(255, 255, 255, 0);
      color: #000000;
    }
  }
  h4 {
    border: none;
  }
  .h4a {
    color: #0355c2;
    font-size: 18px;
  }
  h5 {
    font-weight: bold;
    font-size: 16px;
    &.h5a {
      color: #67c0f6;
    }
    &.h5b {
      clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0% 100%);
      background-color: #0156c3;
      width: fit-content;
      padding-right: 53px;
      color: white;
      padding: 4px;
      padding-right: 40px;
    }
  }
  .block-a,
  .block-b {
    padding: 24px;
    border-radius: 12px;
  }
  .p-column {
    display: flex;
    gap: 30px;
    > div {
      width: calc((100% - 30px) / 2);
      @media (width <= 768px) {
        width: 100%;
      }
    }
    @media (width <= 768px) {
      flex-direction: column;
      width: 100%;
    }
  }
  .block-b {
    background-image: linear-gradient(90deg, #d7ecf5, #bbd9e7);
  }

  .block-a {
    background-image: linear-gradient(90deg, #bbd9e7, #d7ecf5);
  }
  li::marker {
    color: #67c0f6;
  }
}

/* h2.h2a {
  display: inline-block;
  background: linear-gradient(to right, #d6ff14 0%, #d6ff14 100%);
  background-repeat: no-repeat;
  background-size: 0% 40%;
  background-position: 0 80%;
  animation: lineGrow 1.2s forwards;
} */

.line-highlight {
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 2s ease-in-out;
}

.line-highlight.l-blue {
  background-image: linear-gradient(transparent 60%, #a6f8e2 60%);
}

.line-highlight.l-yelllow {
  background-image: linear-gradient(transparent 60%, #d6ff14 60%);
}

.line-highlight.l-green {
  background-image: linear-gradient(transparent 60%, #a6f8cd 60%);
}

.line-highlight.animated {
  background-size: 100% 100%;
}

/* ===== work_list 一覧（2列グリッド + 数字ページネーション） ===== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 7%, 48px);
  margin-top: 160px;
  max-width: 100%;
  margin-inline: auto;
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
    margin-top: 80px;
  }

  .work-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 14px;
    padding: 12px;
    position: relative;
    &__thumb {
      position: relative;
      width: 100%;
    }
    img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
      margin-bottom: -36px;
    }

    &__noimg {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #f3f3f3;
      border-radius: 8px;
    }

    &__kind {
      font-size: 0.85rem;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 999px;
      padding: 2px 10px;
      align-self: flex-start;
    }
    .work-card__name {
      margin: 0px;
      border: none;
      padding: 4px 0px;
      font-weight: normal;
    }
    .work-card__name {
      font-size: 24px !important;
      margin: 0;
      @media (width <= 430px) {
        font-size: 20px !important;
      }
    }
    .work-card__address {
      color: #07297f;
      font-size: clamp(14px, 1rem, 16px);
      font-weight: normal;
    }

    &__site {
      margin: 0;

      &Link {
        text-decoration: underline;
        word-break: break-all;
      }
    }
  }
  .a-pc {
    position: relative;
  }

  /* PC画像に被さる位置に調整 */
  .w_h {
    position: absolute;

    /* a-pc-img と同じ padding を再現 */
    top: 3%;
    left: 3%;
    right: 3%;
    /* aspect-ratio を維持するために高さ計算が必要 */
    height: calc((100% - 8.25%) * (3.45 / 5)); /* 画像のAR: 5 / 3.45 の逆 */

    background-color: #3153ad;
    border-radius: 0px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    z-index: 20;
    transition:
      opacity 0.4s ease,
      transform 0.4s ease,
      visibility 0.4s ease;
    span {
      color: white;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 1px;
      padding-bottom: 20px;
      @media (width <= 430px) {
        font-size: 18px;
      }
    }
    a {
      display: inline-block;
      border: solid 1px white;
      color: white;
      text-align: center;
      width: clamp(100px, 20vw, 200px);
      padding: 12px;
      min-width: 160px;
      &:hover {
        text-decoration: none;
      }
      @media (width <= 430px) {
        font-size: 14px;
        padding: 6px;
        min-width: 140px;
      }
    }
  }
  @media (hover: hover) and (pointer: fine) {
    /* ★ 画像の上にホバーしたときだけ表示 */
    .a-pc-img:hover + .w_h,
  /* ★ オーバーレイの上に移動しても表示を維持 */
  .w_h:hover {
      visibility: visible;
      opacity: 0.85;
      transform: translateY(0);
    }
  }
  @media (width <= 430px) {
    /* スマホ：is-active クラスが付いたら表示 */
    .a-pc.is-active .w_h {
      visibility: visible;
      opacity: 0.85;
      transform: translateY(0);
    }
  }
}

/* .w_h {
  background-color: #3153ad;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  position: absolute;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  z-index: 10;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s ease;
  border-radius: 6px;
 
} */

@media (hover: hover) and (pointer: fine) {
  .work-card:hover .w_h {
    /* visibility: visible;
    opacity: 0.8;
    transform: translateY(0);  */

    a {
      display: inline-block;
      border: solid 1px white;
      color: white;
      text-align: center;
      width: clamp(100px, 20vw, 200px);
      padding: 12px;
      :hover {
        text-decoration: none;
      }
    }
  }
}

/* ページネーション（数字のみ） */
.ord-pagination {
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 80px 0 0;
    @media (width <= 430px) {
      margin: 160px 0 0;
    }
  }

  li {
    width: 36px;
    height: 36px;
    a,
    span {
      display: inline-block;
      min-width: 36px;
      text-align: center;
      padding: 6px 10px;
      border-radius: 100%;
      background-color: #d9f0f9;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    span.current {
      background: #00c1f8;
      color: #fff;
      border-color: #111;
    }
  }
}

form {
  width: clamp(300px, 100%, 1440px);
  margin-inline: auto;
  /* background-color: rgba(255, 255, 255, 0.833); */
  padding-top: 40px;
  box-sizing: border-box;
  z-index: 5;
  position: relative;
  div.c-form > P {
    font-size: clamp(18px, 3.3vw, 20px);
    width: fit-content;
    max-width: 90%;
    margin-inline: auto;
    margin-top: 32px !important;
  }
  .re {
    position: relative;
    &::after {
      content: "必須";
      color: #f50202;
      position: absolute;
      top: -16px;
      font-size: 14px;
      left: 2px;
    }
  }
  textarea {
    width: 100%;
  }
  .cn {
    background-color: #67c0f6;
    color: white !important;
    padding: 8px 12px;
    border-radius: 4px;
    width: 228px;
    text-align: left;
    box-sizing: border-box;
    display: inline-block;
    height: 40px;
    font-size: clamp(16px, 1.563vw, 20px);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    @media (width <= 430px) {
      width: 190px;
      height: 32px;
    }
  }
  input.wpcf7-form-control.wpcf7-submit.has-spinner {
    margin-top: 0px;
  }
  input {
    width: 100%;
    height: 50px;
    border: 1px #000000 solid !important;
  }
  .wpcf7-form-control-wrap {
    position: relative;
    display: block;
    height: 50px;
    flex: 1;
    &:has(.wpcf7-file) {
      align-items: center;
      align-content: center;
      flex-wrap: wrap;
      display: flex;
      input {
        height: auto;
      }
    }
  }
  label {
    display: flex;
    justify-content: space-between;
    height: 50px;
    margin-bottom: 48px;
    gap: 24px;
    padding: 0 5%;
    @media (width <= 820px) {
      flex-direction: column;
      height: auto;
      padding: 0px;
    }
    &.ri {
      @media (width <= 430px) {
        margin-bottom: 60px;
      }
    }
    &.ta {
      align-items: flex-start;
    }
    > div {
      display: flex;
      gap: 4px;
      align-items: center;
      width: 348px;
    }
  }
  p {
    margin: 0px;
  }
  .ta {
    height: 100%;
    z-index: 7;
    .wpcf7-form-control-wrap {
      height: 100%;
      position: relative;
      z-index: 7;
    }
    textarea {
      width: 100%;
      border: 1px #000000 solid !important;
    }
  }
  .wpcf7-file,
  .wpcf7-submit {
    border: none !important;
  }
}
/* リンク無効 */
.l-none {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

.p-navi {
  width: 12px;
  &.anp-prev {
    transform: scaleX(-1);
  }
}

.a-pc {
  background-image: url(/wp-content/uploads/2025/11/a97d9b5673c801aef593dab738e6709d.png);
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 1069/931;
  position: relative;
  margin-bottom: -50px;
  @media (width <= 1024px) {
    margin-bottom: -30px;
  }
  .a-pc-img {
    padding-bottom: 7%;
    padding: 3%;
    padding-bottom: 12%;
    aspect-ratio: 5 / 3.45;
    object-fit: cover;
  }
  .a-sp {
    position: absolute;
    /* background-image: url(/wp-content/uploads/2025/11/sp_list_flame.png); */
    background-size: contain;
    background-repeat: no-repeat;
    /* aspect-ratio: 141/256; */
    bottom: 0px;
    right: -7%;
    padding: min(3.5%, 20px);
    z-index: 22;
  }
}

.post-author {
  position: relative;
  z-index: 3;
  padding: 24px;
  margin-bottom: 70px;
  .post-author-meta {
    margin-left: 0px;
    font-size: 14px;
  }
  h2 {
    font-weight: 900;
    font-size: 16px;
  }
  .post-author-img {
    width: 200px;
    .inner {
      width: 200px;
    }
    img {
      object-fit: cover;
      width: 200px;
      height: 200px;
      border-radius: 100%;
      border: none;
    }
  }
  .clearfix {
    display: flex;
    gap: 24px;
    align-items: center;
    @media (width <= 820px) {
      flex-direction: column;
    }
  }
}
.post-type-archive-work_list {
  background: linear-gradient(
    to right,
    #d3e3eb 0%,
    #ffffff 25%,
    #ffffff 75%,
    #d3e3eb 100%
  );
  .archive-work_list {
    margin-bottom: 100px;
    /* .title-wrap {
      display: flex;
      align-items: flex-end;
      padding-bottom: 8%;
      gap: 10px;
      height: 20vw;
      padding-top: 11%;
      @media (width <= 430px) {
        padding-bottom: 25%;
      }
      .pt {
        font-size: calc((100vw - 55vw) / 10);
        line-height: 1;
        opacity: 0.8;
       
      }
      h1 {
        font-size: clamp(16px, 3.7vw, 24px);
        margin: 0px;
        padding-bottom: 2px;
      }
    } */
    .post-content {
      margin-top: -10%;
    }
    .hb {
      min-width: 108px;
    }
  }
  .ord-pagination {
    margin-top: 120px;
  }
}

.m-toc {
  border: solid 1px;
  margin-bottom: 24px;
  .toc_number {
    display: none;
  }
  > p {
    background-color: #0099d2;
    color: white;
    text-align: center;
    font-weight: 900;
    padding: 8px;
    margin-bottom: 0px;
  }
  ul {
    margin: 0px;
    padding-left: 0px;
    a {
      color: #000000;
      font-size: 16px;
    }
  }
  .in {
    padding: 12px;
    padding-left: 32px;
  }
}

.s-toc {
  background-color: white;
  @media (width <= 1024px) {
    display: none;
  }
  ul {
    list-style: disc !important;
  }
  li::marker {
    color: #67c0f6;
  }
  a {
    font-size: 14px !important;
  }
}

div#toc_container {
  display: none !important;
}

#side {
  margin-left: 0px;
  float: none;
  font-size: 18px;
  min-width: 320px;
  @media (width <= 1024px) {
    width: 100%;
  }
  &.sticky {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 350px; /* サイドバーの元の幅にする */
    right: 0px;
  }
  .side-title {
    background-color: #0099d2;
    color: white;
    font-weight: 900;
  }
  a {
    color: #000000;
  }
  .cat-item {
    position: relative;
    padding-left: 12px;
    font-size: 16px;
    &::before {
      content: "\f0da";
      font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
      font-weight: 900;
      padding-right: 10px;
      font-size: 16px;
      line-height: 1;
    }
  }
}

@media (min-width: 1025px) {
  /* 追従させたい「目次」の設定 */
  .s-toc {
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* 止まる位置 */
    z-index: 3;
  }
}

.a-pc {
  .a-sp {
    .frame-wrap {
      position: relative; /* 重ね合わせの基準 */
      width: clamp(120px, 12.5vw, 180px);
      margin: 0 auto; /* 中央寄せ（任意） */
      /* 額縁画像（前面） */
      .frame {
        display: block; /* 画像下の余白消し */
        width: 100%; /* 親要素いっぱいに広げる */
        height: auto; /* 高さは自動維持 */
        position: relative; /* 重なり順の制御のため */
        z-index: 2; /* 写真より手前に表示 */
        pointer-events: none; /* (任意) 額縁をクリックしても下の写真に反応させる場合 */
      }

      /* 中身の写真（背面） */
      .photo {
        display: block;
        position: absolute; /* 親要素に対して絶対配置 */
        z-index: 1; /* 額縁より奥に表示 */
        object-fit: cover; /* 縦横比が合わない場合、トリミングして埋める */

        /* ▼【重要】ここを額縁の太さに合わせて調整してください▼ */
        top: 1%; /* 上からの位置（%） */
        left: 9.5%; /* 左からの位置（%） */
        width: 81.25%; /* 写真の表示幅（%） */
        height: 93.5%; /* 写真の表示高さ（%） */
        border-radius: 17px;
        z-index: 2;
        @media (width <= 430px) {
          border-radius: 12px;
        }
      }
    }
  }
}

.page-id-481 {
  .col-md-6.mb20 {
    display: flex;
    flex-direction: column;
  }
  .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 16px;
  }
}

#slug-contact {
  .post-content {
    padding: 30px 12px;
    padding-bottom: 120px;
    &::before {
      display: none;
    }
    &::after {
      display: none;
    }
  }
}

.header__contact-bar {
  .t_pc {
    @media (width <= 800px) {
      display: none;
    }
  }
  .t_sp {
    display: none;
    @media (width <= 800px) {
      display: inline;
      width: 20px;
    }
  }
  .mp-wrap {
    display: contents;
    @media (width <= 800px) {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}


/* デフォルトではローディングは非表示 */
#loading {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: none; /* ← ここが大事。最初は出さない */
  align-items: center;
  justify-content: center;
  z-index: 9999;

  opacity: 1;
  transition: opacity 4s ease;
}

/* 初回だけ html.show-loader が付くので、そのときだけ表示 */
html.show-loader #loading {
  display: flex;
}

/* フェードアウト状態 */
#loading.is-hide {
  opacity: 0;
}

/* ロゴ */
#loading .loading-logo img {
  width: 524px;
  height: auto;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

/* is-hide でロゴ先に消える */
#loading.is-hide .loading-logo img {
  opacity: 0;
  transform: scale(0.8);
}

/* スマホサイズ */
@media (max-width: 768px) {
  #loading .loading-logo img {
    width: 90vw;
  }
}

.n-404{
	.n-test{
		 text-align: center;
        font-size: clamp(80px, 20.833vw, 300px);
        margin-bottom: 24px;
        color: #07297f;
		line-height: 1;
	}
	.n-test-p {
    text-align: center;
    margin-bottom: 24px;
    }
	a:hover{
		text-decoration: none;
	}
}

.c-th{
	.c-p{
		text-align: center;
	}
	@media(width <= 430px){
		margin-bottom: 60px;
	}
}