/* Vert — Russian Blue Cattery | Main stylesheet */
:root {
  --pine:#17382f;
  --deep:#102a24;
  --cream:#f5f2ea;
  --white:#fffdfa;
  --sage:#71847b;
  --ink:#25372f;
  --muted:#6f7a73;
  --line:#dcded6}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  color:var(--ink);
  font-family:'Noto Sans JP',sans-serif;
  font-weight:300;
  background:var(--cream);
  line-height:1.9}
a {
  color:inherit}
button,input,textarea {
  font:inherit}
.trap {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden}
button {
  cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:2px solid #b18c53;
  outline-offset:4px}

.header {
  height:87px;
  padding:0 clamp(24px,5vw,85px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--cream)}
.brand {
  font:500 40px/.8 'Cormorant Garamond',serif;
  letter-spacing:.005em;
  text-decoration:none}
.brand small {
  display:block;
  margin-top:9px;
  font:400 8px/1.2 'Noto Sans JP',sans-serif;
  letter-spacing:.31em}
.navlink {
  font-size:11px;
  letter-spacing:.2em;
  text-decoration:none;
  border-bottom:1px solid var(--sage);
  padding:0 0 5px}

.hero {
  min-height:min(780px,calc(100svh - 87px));
  display:grid;
  grid-template-columns:42% 58%;
  background:var(--pine)}
.hero-copy {
  padding:clamp(52px,8vw,130px) clamp(32px,6vw,106px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  color:var(--cream);
  position:relative;
  z-index:1}
.eyebrow {
  font-size:10px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#c4d0c6}
.hero-title {
  font:400 clamp(95px,13vw,190px)/.92 'Cormorant Garamond',serif;
  letter-spacing:-.025em;
  margin:26px 0 23px}
.rule {
  width:44px;
  height:1px;
  background:#b8c4b8;
  margin-bottom:37px}
.tagline {
  font:400 clamp(18px,1.55vw,25px)/2 'Noto Serif JP',serif;
  letter-spacing:.12em;
  margin:0 0 28px;
  white-space:nowrap}
.hero-description {
  font-size:12px;
  line-height:2.6;
  letter-spacing:.075em;
  color:#d3dcd5;
  margin:0 0 40px}
.hero-cta {
  display:inline-flex;
  align-items:center;
  gap:38px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.6);
  padding:15px 22px;
  font-size:10px;
  letter-spacing:.13em;
  transition:.2s}
.hero-cta:hover {
  background:rgba(255,255,255,.1)}
.hero-cta span {
  font-size:20px;
  font-weight:300;
  line-height:1}
.hero-photo {
  min-width:0;
  position:relative;
  overflow:hidden}
.hero-photo:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(12,40,31,.24),transparent 28%)}
.hero-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 48%;
  filter:saturate(.84) contrast(.98)}

.message {
  max-width:1100px;
  margin:auto;
  padding:clamp(80px,10vw,153px) 24px clamp(87px,11vw,170px);
  text-align:center}
.tiny {
  font:500 11px 'Cormorant Garamond',serif;
  letter-spacing:.26em;
  color:#7f8c81;
  text-transform:uppercase}
.message h2,.contact h2 {
  font:400 clamp(23px,3vw,34px)/1.8 'Noto Serif JP',serif;
  letter-spacing:.14em;
  margin:26px 0 30px}
.message p {
  font-size:12px;
  line-height:3;
  letter-spacing:.1em;
  color:#627068;
  margin:0}
.ornament {
  font:400 36px 'Cormorant Garamond',serif;
  color:#98aa9d;
  display:block;
  margin-top:43px}

.contact {
  background:#eaede7;
  padding:clamp(75px,8vw,120px) 24px}
.contact-wrap {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(45px,9vw,150px);
  max-width:1050px;
  margin:auto}
.contact h2 {
  margin-top:23px;
  margin-bottom:24px}
.contact-info p {
  font-size:12px;
  line-height:2.8;
  letter-spacing:.045em;
  color:#5f6e64}
.contact-info .notice {
  font-size:11px;
  margin-top:35px;
  border-left:2px solid #9db0a3;
  padding-left:19px}
.contact-form {
  display:grid;
  gap:22px}
.field label {
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  margin-bottom:7px}
.field label span {
  font-size:10px;
  color:#78867d;
  margin-left:6px}
.field input,.field textarea {
  width:100%;
  border:0;
  border-bottom:1px solid #bfc9bf;
  border-radius:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  padding:10px 2px 13px;
  transition:border-color .15s;
  font-size:14px}
.field input:focus,.field textarea:focus {
  border-color:var(--pine)}
.field textarea {
  min-height:100px;
  resize:vertical}
.form-note {
  font-size:10px;
  line-height:2;
  color:#65776b;
  margin:-8px 0 0}
.form-actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap}
.submit {
  background:var(--pine);
  color:#fff;
  border:1px solid var(--pine);
  padding:16px 35px;
  letter-spacing:.15em;
  font-size:11px}
.submit:hover {
  background:#285447}
.copy {
  background:transparent;
  border:1px solid #a6b6a8;
  color:var(--pine);
  padding:16px 25px;
  letter-spacing:.1em;
  font-size:11px}
.status {
  min-height:18px;
  font-size:11px;
  color:#345f4c;
  margin:0}
.footer {
  background:var(--deep);
  color:#e4e9e1;
  text-align:center;
  padding:44px 24px 34px}
.footer-name {
  font:500 40px 'Cormorant Garamond',serif}
.footer-sub {
  font-size:9px;
  letter-spacing:.25em;
  margin-top:-3px}
.copyright {
  margin-top:27px;
  font-size:9px;
  color:#abbab0;
  letter-spacing:.1em}

@media(max-width:790px) {
  .header {
  height:72px;
  padding:0 22px}
.brand {
  font-size:35px}
.navlink {
  font-size:10px}
.hero {
  display:flex;
  flex-direction:column;
  min-height:auto}
.hero-photo {
  order:0;
  height:clamp(345px,110vw,650px)}
.hero-photo:after {
  background:linear-gradient(0deg,rgba(11,40,31,.5),transparent 36%)}
.hero-photo img {
  object-position:center 42%}
.hero-copy {
  order:1;
  padding:54px 27px 66px;
  align-items:center;
  text-align:center}
.hero-title {
  font-size:110px;
  margin:12px 0 16px}
.rule {
  margin-bottom:22px}
.tagline {
  font-size:17px;
  margin-bottom:14px}
.hero-description {
  font-size:11px;
  margin-bottom:29px}
.eyebrow {
  font-size:9px}
.message {
  padding:80px 25px 94px}
.message p {
  font-size:11px;
  line-height:2.7}
.contact-wrap {
  grid-template-columns:1fr;
  gap:31px}
.contact {
  padding:71px 25px 85px}
.contact h2 {
  font-size:27px}
.contact-info p {
  font-size:11px}
.contact-info .notice {
  margin-top:21px}
.contact-form {
  gap:20px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
* {
  transition:none!important}
}



/* お問い合わせ送信完了画面 */
.contact-success {
  background:#f7f8f4;
  border:1px solid #d2ddd3;
  padding:clamp(28px, 5vw, 52px) clamp(22px, 5vw, 46px);
  color:#24493c;
  line-height:2;
}
.contact-success-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:#244e40;
  border-radius:50%;
  color:#fff;
  font-size:24px;
  margin-bottom:14px;
}
.contact-success-en {
  font:500 11px 'Cormorant Garamond', serif;
  letter-spacing:.22em;
  color:#627a69;
  margin:0 0 8px;
}
.contact-success h3 {
  font:500 clamp(19px, 3vw, 24px) 'Noto Serif JP', serif;
  line-height:1.7;
  margin:0 0 25px;
}
.contact-success p:not(.contact-success-en) {
  font-size:12px;
  line-height:2.1;
  margin:0 0 19px;
}
.contact-success .contact-success-note {
  font-size:10px !important;
  color:#647569;
}
.contact-success-back {
  display:inline-block;
  margin-top:12px;
  padding:11px 18px;
  border:1px solid #547868;
  color:#244e40;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.06em;
}
.contact-success-back:hover, .contact-success-back:focus-visible {
  background:#e6eee7;
}