/* =========================================================
   永寿院 お問い合わせページ（contact.html）専用CSS
   構成: ① PC共通スタイル ② スマホ専用スタイル（860px以下）
   前提: style.css の :root カラートークン・共通クラス（.wrap / .btn / .eyebrow 等）を利用
   ========================================================= */

/* ============================================================
   ① PC共通スタイル
   ============================================================ */

/* ---------- ページ共通ヒーロー（qa / access 等と共通の想定） ---------- */
.page-hero{
  position:relative;
  overflow:hidden;
  background:var(--gray-deep);
  padding:300px 0;
  text-align:center;
}
.page-hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.45;
}
.page-hero .inner{
  position:relative;
  z-index:1;
}
.page-hero h1{
  font-size:clamp(34px,5vw,52px);
  color:#fff;
  letter-spacing:0.1em;
}

/* ---------- お問い合わせ イントロ ---------- */
.contact-intro{
  background:var(--white);
  padding:72px 0 56px;
  text-align:center;
}
.contact-intro-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:18px;
}
.contact-intro-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold-light);
}
.contact-intro-dots span:nth-child(2){
  background:var(--gold);
}
.contact-intro-en{
  font-size:13px;
  letter-spacing:0.32em;
  color:var(--gold);
  margin-bottom:10px;
}
.contact-intro-title{
  font-size:clamp(26px, 3.2vw, 34px);
  color:var(--gray-deep);
  letter-spacing:0.1em;
  margin-bottom:22px;
}
.contact-intro-desc{
  max-width:560px;
  margin:0 auto;
  font-size:18px;
  color:var(--ink-soft);
  line-height:2;
  font-weight: 600;
}

/* ---------- お問い合わせフォーム ---------- */
.contact-form-section{
  background:var(--ivory);
  padding:0 0 96px;
}
.contact-form-wrap{
  max-width:760px;
}
.contact-form{
  background:var(--white);
  border:1px solid var(--line);
  padding:56px 64px;
}

.cf-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}

.cf-error-banner{
  background:#FBEAEA;
  border:1px solid #D98A8A;
  color:#9B3B3B;
  font-size:14.5px;
  padding:16px 20px;
  margin-bottom:32px;
  border-radius:2px;
  text-align:center;
}
.cf-row:first-child{
  padding-top:25px;
}
.cf-label{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  font-family:'Shippori Mincho',"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:800;
  font-size:18px;
  color:var(--gray-deep);
  letter-spacing:0.06em;
  padding-top:12px;
  white-space:nowrap;
}

.cf-required{
  display:inline-flex;
  align-items:center;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.05em;
  color:#fff;
  background:var(--gold);
  padding:3px 9px;
  border-radius:2px;
}
.cf-optional{
  display:inline-flex;
  align-items:center;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  background:var(--beige);
  padding:3px 9px;
  border-radius:2px;
}

.cf-field input[type="text"],
.cf-field input[type="tel"],
.cf-field input[type="email"],
.cf-field textarea{
  width:100%;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  font-size:15.5px;
  color:var(--ink);
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:2px;
  padding:14px 16px;
  transition:border-color .2s ease, background .2s ease;
}
.cf-field input:focus,
.cf-field textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:var(--white);
}
.cf-field textarea{
  resize:vertical;
  line-height:1.9;
}
.cf-field-narrow input{
  max-width:240px;
}

.cf-field-date input{
  max-width:320px;
  font-size:17px;
  padding:16px 18px;
}

.cf-field-select select{
  width:100%;
  max-width:240px;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  font-size:15.5px;
  color:var(--ink);
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:2px;
  padding:14px 16px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23AD8A46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  transition:border-color .2s ease, background-color .2s ease;
}

.cf-field-select select:focus{
  outline:none;
  border-color:var(--gold);
  background-color:var(--white);
}

.cf-field input[type="date"],
.cf-field input[type="time"]{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  color-scheme:light;
}

.cf-check-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.cf-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  font-size:15px;
  color:var(--ink);
  line-height:1.7;
}
.cf-check input[type="checkbox"]{
  flex:none;
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:var(--gold);
  cursor:pointer;
}

.cf-row-agree{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  padding-top:32px;
}
.cf-check-agree{
  font-size:14.5px;
  color:var(--ink-soft);
}
.cf-check-agree a{
  color:var(--gold);
  border-bottom:1px solid var(--gold);
}

.cf-submit-row{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.cf-submit{
  min-width:280px;
  justify-content:center;
  font-size:18px;
  letter-spacing:0.14em;
  font-weight: 800;
}
.cf-note{
  font-size:16px;
  color:var(--ink-soft);
  text-align:center;
  font-weight:600;
}

.cf-invalid{
  border-color:#D98A8A !important;
  background:#FBEAEA !important;
}
.cf-row-invalid .cf-label{
  color:#9B3B3B;
}
.cf-row-invalid .cf-required,
.cf-row-invalid .cf-optional{
  background:#D98A8A;
  color:#fff;
}

/* ---------- CONTACT見出し（CONTACT／お問い合わせ）：ふわっと表示 ---------- */
.js-anim-ready .contact-intro-en,
.js-anim-ready .contact-intro-title{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
	opacity 1.6s cubic-bezier(0.34, 1.56, 0.64, 1),
	transform 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.contact-intro-title{
  transition-delay: 0.1s;
}
.contact-intro-en.is-visible,
.contact-intro-title.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.contact-form-wrap{
  max-width:760px;
  padding-top:56px;
}

/* ---------- ヒーロー見出し（お問い合わせ）：ふわっと表示 ---------- */
.js-anim-ready .page-hero .inner{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
    opacity 1.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-hero .inner.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* ============================================================
   ② スマホ専用スタイル（860px以下）
   ============================================================ */
@media (max-width:860px){

.page-hero{
  padding:160px 0;
}

  .contact-intro{
	padding:48px 0 40px;
  }
  .contact-intro-desc{
	font-size:15px;
  }

  .contact-form-section{
	padding:0 0 64px;
  }
  .contact-form{
	padding:36px 22px;
  }

  .cf-row{
	grid-template-columns:1fr;
	gap:12px;
	padding:22px 0;
  }
  .cf-label{
	padding-top:0;
  }

  .cf-row-agree{
	padding-top:28px;
  }

  .cf-submit{
	width:100%;
	min-width:0;
  }

  .cf-field-narrow input{
	max-width:none;
  }
  
.cf-field-date input{
	max-width:none;
  }
  .cf-field-select select{
	max-width:none;
  }
  
}