@charset "UTF-8";

/* ========================================================================
    変数
======================================================================== */
:where(:root) {
    /* colors */
    --color-green: #004829;
    --color-gold: #C9A646;
    --color-ivory: #F9F6F1;
    --color-pink: #F8DDE0;
    --color-brown: #502200;
    --color-text: #333;

    /* Calculations & Units */
    --root-font-size: 16;
    --rem: calc(1rem / var(--root-font-size));

    /* Layout */
    --layout-width-min: 375;
    --layout-width-max: 1440;
    --layout-width-inner-pc: 1200;

    /* Typography */
    --ff-base: "Noto Serif JP", serif;
    --fz-base: calc(16 * var(--rem));
    --fw-base: 400;
    --lh-base: 1.5;

    /* Z-index Layers */
    --z-loading: 300;
    --z-modal: 100;
    --z-drawer: 40;
    --z-floating: 30;
    --z-header: 20;
    --z-footer: 10;
    --z-default: 1;
}

/* ========================================================================
    初期設定
======================================================================== */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

html {
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    color: var(--color-text);
    font-family: var(--ff-base);
    font-style: var(--fz-base);
    font-weight: var(--fw-base);
    line-height: var(--lh-base);
    overflow-x: clip;
    min-block-size: 100svb;
    background-color: var(--color-ivory);
}

img {
    block-size: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    color: inherit;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    cursor: pointer;
}

/* ========================================================================
    PC/SP表示設定
======================================================================== */
.hidden-sp {
  @media (600px > width) {
    display: none !important;
  }
}
.hidden-pc {
  @media (600px <= width) {
    display: none !important;
  }
}

.visible-sp {
  display: none !important;

  @media (600px > width) {
    display: revert;
  }
}

/* ========================================================================
    レイアウト - インナー
======================================================================== */
.inner{
    box-sizing: content-box;
    padding-inline: 40px;
    max-inline-size: 1200px;
    margin-inline: auto;
}

/* =========================================================
    HEADER
 =========================================================== */

.header {
    position: sticky;
    top: 0;
    inset-inline: 0;
    z-index: var(--z-header);
    padding: 15px 0;
    background-color: var(--color-green);

    a {
        color : var(--color-gold);
    }
 }

.header__inner {
    display: flex;
    justify-content: space-between;

    @media (599px > width) {
        padding-inline: 20px;
    }
 }

.header__logo {
    font-family:"Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.08em;
    background: linear-gradient(to bottom, 
        #d4af37 0%,    /* 上：濃いゴールド */
        #f9f1c6 48%,    /* 白の始まり */
        #f9f1c6 51%,    /* 白の終わり → 幅を細めに */
        var(--color-gold) 100%   /* 下：濃いゴールド */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    @media (599px > width) {
        font-size: 20px;
        line-height: 1;
    }
}

.header__nav {
    display: flex;

    @media (599px > width) {
        display: none;
    }
 }

.header__list {
    display: flex;
    column-gap: 32px;
    align-items: center;

    li {
        line-height: 1;
        letter-spacing: 0.1em;
        font-weight: 500;
    }
 }

/* =========================================================
    ドロワー
 =========================================================== */

/* ボタン */
.hamburger{
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:28px;
    height:20px;
    background:none;
    border:none;
    cursor:pointer;
    z-index:var(--z-drawer); /* メニューより上に */
}

.hamburger span{
    display:block;
    height:2px;
    background: var(--color-gold);
    border-radius:2px;
    transition:transform .4s ease, opacity .3s ease, background .3s;
}

@media(max-width:599px){ .hamburger{ display:flex; } }

/* --- open時の変形 --- */
.hamburger.open span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2){
  opacity:0; transform:scaleX(0);
}
.hamburger.open span:nth-child(3){
  transform:translateY(-9px) rotate(-45deg);
}

.hamburger.open span:nth-child(1){
  transition-delay:.05s;
}
.hamburger.open span:nth-child(3){
  transition-delay:.1s;
}

/* フルスクリーンメニュー */
.nav-full{
  position:fixed; inset:0;
  background:rgba(0,40,0,0.96);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:32px;
  transform:translateY(-100%);
  /* transition:transform .5s ease; */
  z-index:var(--z-floating);
    /* ここを変更/追加 */
  transition: none;           /* ← 初期はアニメ無効 */
  visibility: hidden;         /* ← まず見えない */
}

/* JSが準備できたら表示＆アニメ許可　ここを丸っと追加 */
.js-ready .nav-full{
  visibility: visible;
  transition: transform .5s ease;  /* ← 既存の遷移をここで有効化 */
}
/* 丸っと追加ここまで */

.nav-full a{
  color:var(--color-gold); /* ゴールド文字 */
  font-size:28px;
  font-family:'Cinzel',serif;
  letter-spacing:.08em;
  text-decoration:none;
  transition:color .3s;
}
.nav-full a:hover{ color:#f9f1c6; }

/* 開いた状態 */
.nav-full.open{ transform:translateY(0); }

 /* =========================================================
    FOOTER
 =========================================================== */
 footer { 
    inset-inline: 0;
    z-index: var(--z-footer);
    padding: 15px 0;
    background-color: var(--color-green);
  position: sticky;
  top: 100vh;
 }

 .footer__logo{
    text-align: center;
    color: var(--color-gold);
    font-size: 12px;
 }

  /* =========================================================
    トップへ戻るボタン
 =========================================================== */
.page-top {
    position: fixed;
    inset-block-end: 64px;
    inset-inline-end: 20px;
    z-index: var(--z-floating);
    display: inline inline-block;
    visibility: hidden;
    max-inline-size: 64px;
    aspect-ratio: 1;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    @media (600px <= width) {
      inset-block-end: 16px;
      inset-inline-end: 120px;
    }
    &.is-show { 
    visibility: visible;
    opacity: 1;
    }

    img {
        inline-size: 100%;
    }
}


/* ========================================================================
    共通
======================================================================== */
.h1-title, .h2-title, .h3-title {
    font-family:"Prata", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    font-weight: 700;
    text-align: center;
}

.h1-title {
    font-size: 40px;

    @media (600px > width) {
        font-size: 26px;
    }
}

.h2-title {
    font-size: 36px;

    @media (600px > width) {
        font-size: 22px;
    }
}

.h3-title{
    font-size: 28px;

    @media (600px > width) {
        font-size: 20px;
    }
}

.h2-title__shadow {
    text-shadow: 0 0 3px rgba(80, 34, 0, 0.9), var(--color-brown) 1px 0 10px;
}

.btn {
    width: min(100%, 500px);
    background-color: var(--color-green);
    color: var(--color-gold);
    font-size: 24px;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.4s;
    margin: 20px auto 0;

    a{
        display: block;
        padding: 12px;
        font-weight: 500;
    }

    @media (600px > width) {
        font-size: 20px;
    }
}

.btn:hover {
    background-color: var(--color-pink);
    color: var(--color-brown);
    transition: background-color 0.4s;
}

.btn:active {
    background-color: var(--color-pink);
    color: var(--color-brown);
    transition: background-color 0.4s;
}

.mar-end-20 {
    margin-block-end: 20px;
}

.breadcrumb {
    font-size: 14px;
    opacity:.8;
    margin-block:8px 16px;
}

/* ========================================================================
    ポップアップ
======================================================================== */
dialog {
	padding: 1.5rem;
	border: none;
	border-radius: 0.5rem;
	text-align: center;
}
.popup-close {
	padding: 0.5rem 1rem;
	border-radius: 0.4rem;
	cursor: pointer;
    background-color: var(--color-green);
    color: var(--color-gold);
    border-radius: 5px;
    text-align: center;
    margin: 20px auto 0;
}

/* ========================================================================
    ファーストビュー
======================================================================== */
#first-view {
    position: relative;
    inline-size: 100%;
    block-size: 700px;

        @media (max-width: 599px) {
        block-size: 500px;
    }
}

.first-view__swiper,
.first-view__swiper-wrapper,
.first-view__swiper-slide {
    inline-size: inherit;
    block-size: inherit;
}

@keyframes pan-up{
  from { object-position: 50% 25%; }
  to   { object-position: 50% 100%; }
}

@keyframes pan-down{
  from { object-position: 50% 100%; }
  to   { object-position: 50% 0%; }
}

@keyframes zoom-in {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* ── PC用（600px以上） ── */
@media (min-width: 600px){
  .img-pan-up.is-animating   { animation: pan-up 20s linear forwards; }
  .img-pan-down.is-animating { animation: pan-down 20s linear forwards; }

  /* 特定スライド用：PCでは pan-up */
  .anim-panup-or-zoom.is-animating { animation: pan-up 20s linear forwards; }
  .anim-pandown-or-zoom.is-animating { animation: pan-down 20s linear forwards; }
}

/* ── SP用（600px以下） ── */
@media (max-width: 599px){
  /* 既存の zoom 専用クラス */
  .img-zoom-in.is-animating { animation: zoom-in 15s linear forwards; }

  /* 特定スライド用：SPでは zoom-in */
  .anim-panup-or-zoom.is-animating,
  .anim-pandown-or-zoom.is-animating
   { animation: zoom-in 15s linear forwards; }
}

.img-zoom-in.is-animating {
  animation: zoom-in 15s linear forwards;
}

.first-view__image{
    position: relative;        /*  ←これを追加 */
    inline-size: inherit;
    block-size: inherit;

    img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }
}

.bg-white {
    background-color: #fff;
}

.swiper-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items:center;
    justify-content:center;
    inline-size: 100%; 
    block-size: 100%;
    margin: 0;
    text-align: center;
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:min(8vw,56px);
    letter-spacing:.08em;
    color: #fff;
    z-index: 1;
}

.swiper-text__shadow {
    text-shadow: 0 0 3px rgba(80, 34, 0, 0.9), var(--color-brown) 1px 0 10px;
}

.title-sheen{
  color:#c9a646;
  text-shadow:0 2px 6px rgba(0,0,0,.12);
  overflow:hidden;
}

/* 走るハイライト帯 */
.title-sheen::after{
  content:"";
  position:absolute; top:0; left:-150%;
  height:100%; width:50%;
  background:linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.9) 50%,
    transparent 70%);
  transform:skewX(-20deg);
  mix-blend-mode:screen;       /* 文字だけ明るく、白背景では外側はほぼ見えない */
  pointer-events:none;
  animation: none;
}

.swiper-slide-active .title-sheen::after{
  animation: sheen 2.4s ease-in-out 1;
  animation-delay: 2s;
}

@keyframes sheen{
  to { left:150%; }
}

.logo-gradient {
    display:inline-block;
    background: linear-gradient(to bottom, 
        #d4af37 0%,    /* 上：濃いゴールド */
        #f9f1c6 48%,    /* 白の始まり */
        #f9f1c6 51%,    /* 白の終わり → 幅を細めに */
        var(--color-gold) 100%   /* 下：濃いゴールド */
    );
    --webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent; /* Safari/iOS 必須 */
  color: transparent;                    /* それ以外 */
}


/* ========================================================================
    セクション共通設定
======================================================================== */
.section-common {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;

     h2 {
    margin-block-end: 20px;
    }
}

.btn-300 {
    max-width: 300px;
}

.btn-450 {
    max-width: 300px;
}

/* ========================================================================
    アバウトセクション
======================================================================== */
.top-about {
    block-size: 400px;
    background-color: var(--color-ivory);

    p{
        line-height: 2;
    }
}

/* ========================================================================
    プロパティセクション
======================================================================== */
.property-selection {
    block-size: 500px;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('../img/img-property-section.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

.property-selection__text p{
    line-height: 2;
    color: #fff;
}

/* ========================================================================
    マッチングサービスセクション
======================================================================== */
.matching-service {
    block-size: 500px;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('../img/img-matching-section.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

.matching-service__text p{
    line-height: 2;
    color: #fff;
}


/* ========================================================================
    一覧ページ共通設定
======================================================================== */

.list-page-first-view {
    position: relative;
    inline-size: 100%;
    block-size: 200px;
    background: url('../img/imag-bg.webp') repeat;
    background-size: 180px;

    @media (max-width: 599px) {
        block-size: 150px;
    }
}

/* ========================================================================
    物件一覧ページ
======================================================================== */

.list-page__text{
    padding-block: 30px;
    text-align: center;
}

.props-list-card{
    position: relative !important;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border:1px solid #ccc;
    border-radius:12px;
    background-color: #fff;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
    max-width: 900px;
    height: 300px;
    margin: 0 auto 30px;
    overflow:hidden;
}

.btn-wrap{
    position:absolute;
    bottom:16px;
    right:16px;
    z-index:2;
}

.props-list-card__columns {
    display: flex;
    justify-content: start;
    align-items: center;
}

.props-list-card__img {
    position:relative;  
    flex: 0 0 50%;
    overflow: hidden;
}

.props-list-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center;
    overflow: hidden;
}

.props-list-card__text-area{
    flex: 1 1 50%;
    padding: 20px 24px 42px;
    display: flex;
    font-size: 16px;
    gap: 10px;
}

.btn-list-page {
    background-color: var(--color-green);
    color: var(--color-gold);
    font-size: 20px;
    padding-block: 10px;
    padding-inline: 16px;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.4s;

    a{
        display: block;
        font-weight: 500;
    }
}

.btn-list-page:hover {
    background-color: var(--color-pink);
    color: var(--color-brown);
    transition: background-color 0.4s;
}

.btn-list-page:active {
    background-color: var(--color-pink);
    color: var(--color-brown);
    transition: background-color 0.4s;
}

@media (hover:hover) {
    .props-list-card:hover {
        cursor:pointer;
    }
    .props-list-card__link:hover .props-list-card__img img {
            transform:scale(1.08);
        }
    .props-list-card__img img { 
            transition:transform .4s ease;
        }
    .props-list-card__link:hover::after {
        transform: translate(3px, -50%);
        opacity: 1;
    }
}

@media (max-width: 599px) {
    .props-list-card {
        display: flex;
        flex-direction: column; 
        height: auto;
    }

    .props-list-card__columns{
        flex-direction:column;
        gap:12px;
        align-items: start;
    }

    .props-list-card__img {
        flex-basis: auto;
    }

    .props-list-card__img img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    .btn-wrap{
        position:  static;            /* 右下固定を解除して */
        margin: 12px 16px 16px;      /* 自然に最下部に配置 */
    }

    .btn-list-page {
        font-size: 16px;
        white-space: nowrap;
    }
}

/* ========================================================================
    候補者一覧ページ
======================================================================== */

.match-grid {
    display:grid;
    gap:28px;
    grid-template-columns:repeat(3, 1fr);
    justify-items:center;
    padding-block-start: 30px;
    padding-block-end: 50px;

    @media (600px > width) {
        grid-template-columns: 1fr;
    }
}

.candidate-card {
    display:block;
    background: #fff;
    border: 1px solid #ddd;
    max-width: 330px;
    border-radius: 16px;
    /* margin: auto; */
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition-duration: .4s;
}

.candidate-card:hover,
.candidate-card:active {
    transform: scale(1.08);
}

.cand-name {
    color: var(--color-brown);
    font-size: 24px;
    /* margin: 10px auto 5px; */
    text-align: center;
}

.cand-photo {
    display:block;
    /* max-width: 330px; */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 10px auto 0;
    border-radius: 16px;
    overflow: hidden;
}

.cand-text{
    display: grid;
    grid-template-columns: auto 1fr; /* 左にdt, 右にdd */
    gap: 4px 12px;                  /* 行間と列間 */
    margin-top: 10px;
    font-size: 0.95rem;
    text-align: left;

    dt{
        font-weight: bold;
    }

    dd {
        margin: 0;
    }
}


/* ========================================================================
    詳細ページ共通
======================================================================== */

.estate-sub, .cand-sub {
    font-size: 28px;
    color: var(--color-brown);
    text-align: center;
    font-weight: 600;
    margin-block-start: 10px;
}

.estate-card, .cand-card {
    background-color:#fff;
    border-radius:12px;
    padding:16px 18px;
    margin-block-start: 20px;
    margin-block-end: 50px;
}

.sec-title{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:"Prata", serif;
    font-weight: 700;
    letter-spacing:.06em;
    font-size: 24px;
    color: var(--color-gold);
    gap: 1em;
    margin: 18px 0;
}


.sec-title::before,
.sec-title::after {
  content: "";
  flex: 1;
  border-top: 2px solid var(--color-gold);
}

/* .about .sec-title:first-of-type {
    margin-top: 0;
} */

.cand-portrait {
    display: block;
    width: min(100%, 500px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #fff;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
    margin: 18px auto;
}

.cand-portrait__small {
    max-width: 330px;
}

/* ========================================================================
    物件詳細ページ
======================================================================== */

.estate-meta {
    font-size: 22px;
    color: var(--color-brown);
    text-align: center;
    font-weight: 600;
    margin-block-start: 10px;
    margin-block-end: 10px;
}

.estate-gallery {
    margin-block-start: 20px/*  32px */;
}

.gallery-main img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  /* border-radius:12px; */
}

.gallery-thumbs {
    margin-top:12px;
}

.gallery-thumbs .swiper-slide{
    opacity:.6;
    cursor:pointer;
}
.gallery-thumbs .swiper-slide-thumb-active {
    opacity:1;
}
.gallery-thumbs img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:8px;
    border:2px solid transparent;
}
.gallery-thumbs .swiper-slide-thumb-active img{
    border-color: var(--color-gold);
}

.about p, .comment p{
    line-height:1.9;
    /* padding:0 1rem; */
}

/* .double-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 36px;       
    align-items: start;

        @media (600px > width) {
            display: block;
        }
} */

.double-columns {
    display: flex;
    justify-content: space-between;

        @media (600px > width) {
            display: block;
        }
}

.double-columns-inner {
    width: 48%;

    @media (600px > width) {
        width: 100%;
    }
}

.spec-grid{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:8px 18px;
  /* padding:0 1rem; */

    dt {
        font-weight:700;
    }

    dd { 
        margin:0;
    }

}

/* 地図 */
.map-frame { 
    border-radius:12px;
    overflow:hidden;
    border:1px solid #e6e0d5;
}

.map-frame img,
 .map-frame iframe {
    width:100%;
    aspect-ratio:16/9;
    display:block;
}
.access {
    margin:10px 0 0 0;
    padding-left:1em;
}

.related {
    h3 {
        color: var(--color-brown);
    }
}


/* ========================================================================
    候補者詳細ページ
======================================================================== */
.profile,
.cand-interview,
.cand-gallery {
    margin-block-end: 40px;
}

.cand-sub {
    font-size: 28px;
    color: var(--color-brown);
    text-align: center;
    font-weight: 600;
    margin-block-start: 10px;
}

/* 親：2カラム（SPでは1カラムに） */
.profile-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 36px;          /* 行間 / 列間 */
  align-items: start;

    @media (600px > width) {
        grid-template-columns: 1fr;
    }
}

.meta{
  --term-w: 8em;  /* dt の横幅 */
  display: grid;
  grid-template-columns: var(--term-w) 1fr;
  column-gap: 0px;
  row-gap: 10px;
}

.meta dt,
.meta dd{
   padding-block: 8px;
   border-bottom: 1px solid #e6e0d5;
    box-sizing: border-box;
}

.meta dt{
    padding-right: 14px; 
  /* grid-column: 1; */
  font-weight: 700;
  color: #6b5e3c;
}
.meta dd{
    padding-left: 14px;
    grid-column: 2;
    margin: 0;
}

.meta :is(dt,dd):nth-last-child(-n+2){
    border-bottom: none;
}

/* インタビュー */
.cand-interview .q {
    font-weight:700;
    margin:14px 0 6px;
}

.cand-interview .ans { margin:0 0 10px; line-height:1.9; }

/* ギャラリー */
.cand-gallery__grid {
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cand-gallery img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:10px;
}


/* ========================================================================
    コンタクトフォーム
======================================================================== */
.form {
}

.form__lists {
  display: block grid;
  row-gap: 40px;
}

.form__list {
  display: block grid;
  row-gap: calc(8 * var(--rem));
}

.form__head {
}

.form__text {
}

.form__input {
  [type="text"],
  [type="email"],
  [type="tel"],
  textarea {
    inline-size: 100%;
    padding-block: 9px;
    padding-inline: 15px;
    font-family: inherit;
    font-size: 16px;
    line-height: calc(24 / 16);
    color: inherit;
    letter-spacing: 0;
    appearance: none;
    background-color: #fff;
    border: 1px solid #c3c3c3;
    border-radius: 4px;
    box-shadow: none;

    &::placeholder {
      color: #ccc;
    }
  }

  select {
    inline-size: 100%;
    padding-block: 9px;
    padding-inline: 15px;
    font-family: inherit;
    font-size: 16px;
    line-height: calc(24 / 16);
    color: inherit;
    letter-spacing: 0;
    background-color: #fff;
    border: 1px solid #c3c3c3;
    border-radius: 4px;
    box-shadow: none;

    &::placeholder {
      color: #ccc;
    }
  }

  textarea {
    block-size: 180px;
    resize: vertical;
  }
}

.form__button {
  margin-block-start: 40px;
  margin-block-end: 40px;
  text-align: center;

  [type="submit"] {
    display: inline-block;
    padding-block: 8px;
    padding-inline: 32px;
    font-size: 18px;
    line-height: calc(28 / 18);
    color: var(--color-gold);
    cursor: pointer;
    background-color: var(--color-green);
    border: none;
    border-radius: 5px;
  }
}

[type="submit"]:hover {
    background-color: var(--color-pink);
    color: var(--color-brown);
    transition: background-color 0.4s;
    border: none;
}

[type="submit"]:active {
    background-color: var(--color-pink);
    color: var(--color-brown);
    transition: background-color 0.4s;
    border: none;
}

/* レイアウト崩れ対策 */
span.wpcf7-spinner {
  display: none;
}