@charset "utf-8";
.contact-main{
  width: min(760px, 92%);             
  margin: clamp(18px, 4vw, 28px) auto;
}

/* ---- セクションの共通余白 ---- */
.contact-section{
  margin: clamp(22px, 5vw, 36px) 0;
}


.contact-card{
  font-family: "Playfair Display","Noto Serif JP",serif;
  background: #FDFCF9;                 /* やわらかい白 */
  border: 1px solid #E1DED6;           /* グレージュの細線 */
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  padding: clamp(22px, 5vw, 36px);
  text-align: center;
  line-height: 1.9;
  letter-spacing: .03em;
  color: #565353;
  transition: box-shadow .25s ease, transform .25s ease;
}
.contact-card:hover{
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transform: translateY(-1px);
}


.contact-title{
  font-family: "Playfair Display","Noto Serif JP",serif;
  font-size: clamp(16px, 4.6vw, 18px);
  letter-spacing: .28em;
  color: #6a665f;
  text-align: center;
  margin-bottom: .9em;
}


.contact-lead{
  font-size: clamp(14px, 3.2vw, 15.5px);
  color: #565353;
  margin: 0 auto;
}


.contact-tel{
  text-align: center;
  margin: clamp(10px, 3vw, 16px) 0;
}
.contact-tel a{
  display: inline-block;
  padding: .7em 1.2em;
  border: 1px solid #bdb6a8;
  border-radius: 10px;
  background: #fff;
  letter-spacing: .18em;
  color: #333;
  font-size: clamp(14px, 3.6vw, 16px);
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
  margin: 20px;
}
.contact-tel a:hover{
  background: #f7f3ea;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
}


.contact-hpb{
  text-align: center;
  margin: 20px;
}
.contact-hpb img{
  width: clamp(120px, 36vw, 160px);
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
  transition: transform .2s ease;
}
@media (hover:hover){
  .contact-hpb a:hover img{ transform: translateY(-1px); }
}


.line-row{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
}
.line-row figure{
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 8px; overflow: hidden;
}
.line-row figure img{
  width: 100%; height: 100%; object-fit: contain;
}
.line-row p{
  flex: 1 1 auto;
  font-size: clamp(14px, 3.2vw, 15px);
  color: #565353;
  line-height: 1.9;
}


@media (max-width: 599px){
  .line-row{ flex-direction: column; align-items: flex-start; }
}

/* ---- 注意・補足 ---- */
.notes{
  display: flex; flex-direction: column; gap: .4em;
  color: #6f6a61;
  font-size: clamp(13px, 3vw, 14px);
  margin-top: clamp(10px, 3vw, 16px);
}

/* ---- 小さめ写真---- */
.contact-photo{
  width: 160px; height: auto;
  margin: clamp(16px, 4vw, 22px) auto;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.contact-photo img{ width: 100%; height: auto; display: block; 
}


.contact-message{
  text-align: left;            
}
.contact-message p{
  color: #5b5750;
  font-size: clamp(14px, 3.2vw, 15px);
}


.contact-message figure{
  width: min(320px, 70%);
  margin: 0 auto 14px;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.contact-message figure img{ width:100%; height:auto; display:block; 
}


.hr{
  height: 1px;
  background: #E1DED6;
  margin: clamp(16px, 4vw, 24px) 0;
  opacity: .9;
}


.fx-initial{ 
  opacity:0; 
  transform: translateY(16px); 
  transition: opacity .8s ease, transform .8s ease; 
}
.fx-initial.is-in{ 
  opacity:1; 
  transform:none; 
}


.contact-hpb-section {
  font-family: "Playfair Display","Noto Serif JP",serif;
  background: #FDFCF9;               
  border: 1px solid #E1DED6;         
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  padding: clamp(22px, 5vw, 36px);
  text-align: center;
  line-height: 1.8;
  color: #565353;
  transition: box-shadow .25s ease, transform .25s ease;
}

.contact-hpb-section:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transform: translateY(-2px);
}


.contact-hpb-section p {
  font-size: clamp(14px, 3.2vw, 15.5px);
  color: #565353;
  margin-bottom: clamp(10px, 3vw, 18px);
}


.contact-hpb-section .contact-hpb img {
  width: clamp(160px, 38vw, 220px);
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
  transition: transform .25s ease;
}

.contact-hpb-section .contact-hpb img:hover {
  transform: scale(1.03);
}

.line-card {
  text-align: center;
   font-family: "Playfair Display","Noto Serif JP",serif;
  background: #fffdfa;
  border: 1px solid #e4e0d7;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
  padding: clamp(24px, 5vw, 40px);
  margin-bottom: clamp(30px, 6vw, 50px);
}

.line-card .contact-title {
  font-family: "Playfair Display","Noto Serif JP",serif;
  font-size: clamp(16px, 3.4vw, 18px);
  letter-spacing: 0.08em;
  color: #4a4a4a;
  font-weight: 500;
  margin-bottom: clamp(12px, 3vw, 16px);
}

.line-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(14px, 3vw, 20px);
}

.line-row .fa-line {
  font-size: clamp(30px, 6vw, 48px);
  color: #06C755; /* LINEグリーン */
  transition: transform 0.3s ease;
}

.line-row .fa-line:hover {
  transform: scale(1.1);
}

.line-text {
  font-size: clamp(14px, 3vw, 15.5px);
  color: #555;
  line-height: 1.8;
}
.notes-card {
  background: #fffdfa;
  border: 1px solid #e4e0d7;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
  padding: clamp(24px, 5vw, 40px);
  margin: clamp(24px, 6vw, 60px) auto;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  color: #565353;
  line-height: 1.9;
  text-align: center; 
  max-width: 900px;   
}

.notes-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px; 
  border-radius: 50%;
  background: #d9c7a3;  
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.notes-title {
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 600;
  color: #3b3b3b;
  letter-spacing: 0.05em;
  margin-bottom: clamp(16px, 3vw, 22px);
  text-align: center;
  position: relative;
}



.notes-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;  
  text-align: left;  
}

.notes-list li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.6em;
  font-size: clamp(14px, 3vw, 15.5px);
  color: #555;
}

.notes-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: #b89d68;
  font-weight: bold;
}

.notes-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.footer-copy {
  font-size: 0.7rem;              
  color: rgba(0, 0, 0, 0.5);      
  text-align: center;
  margin-top: 40px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}