/* ===============================
   Theme
=============================== */
:root{
  --base-color:#391c0e; /* ベースカラー */
  --text-color:#f5f0ec;
  --gold-1:#e7d2b0;
  --gold-2:#caa572;
  --gold-3:#a37845;
  --gold-glow:rgba(202,165,114,.35);
}

/* ===============================
   Base
=============================== */
html,body{
  height:100%;
}
body{
  margin:0;
  font-family:'Noto Serif JP', serif;
  color:var(--text-color);
  background: radial-gradient(1200px 800px at 80% 10%, #462414 0%, #3e1f11 30%, var(--base-color) 70%),
  linear-gradient(180deg, #2b150a 0%, var(--base-color) 60%);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  text-align:center;
  overflow-x:hidden;
  position:relative;
  isolation:isolate; /* 背景アニメの重なり制御 */
}

/* ===============================
   Subtle background light animation
   - きわめて控えめな光の“流れ”と“きらめき”
=============================== */
.bg-lights{
  position:fixed;
  inset:-10vmax;
  z-index:-1;
  pointer-events:none;
  filter: blur(30px);
  opacity:.25;
}
.beam, .flare{
  position:absolute;
  border-radius:50%;
  mix-blend-mode:screen;
  background: radial-gradient(closest-side, rgba(255,230,180,.65), rgba(255,230,180,0));
}
/* ゆっくりと移動する光筋 */
.beam{
  width:45vmax; height:45vmax;
  left:-10vmax; top:-5vmax;
  animation: floatA 22s ease-in-out infinite alternate;
  transform: rotate(-10deg);
}
.beam.b2{
  width:55vmax; height:55vmax;
  right:-15vmax; bottom:-10vmax;
  animation: floatB 28s ease-in-out infinite alternate;
}
/* ほのかなフレア */
.flare{
  width:22vmax; height:22vmax;
  left:15vmax; bottom:5vmax;
  animation: pulse 18s ease-in-out infinite;
}

@keyframes floatA{
  0%{ transform:translate3d(0,0,0) rotate(-12deg); }
  100%{ transform:translate3d(6vmax,4vmax,0) rotate(-6deg); }
}
@keyframes floatB{
  0%{ transform:translate3d(0,0,0) rotate(8deg); }
  100%{ transform:translate3d(-5vmax,-6vmax,0) rotate(2deg); }
}
@keyframes pulse{
  0%,100%{ opacity:.18; transform:scale(1); }
  50%{ opacity:.28; transform:scale(1.06); }
}

/* 動きに配慮 */
@media (prefers-reduced-motion: reduce){
  .bg-lights{ display:none; }
}

/* ===============================
   Header (logo with champagne gold gradient)
=============================== */
header{
  margin-top:10vh;
  padding:0 20px;
}
.logo{
  font-size: clamp(1.8rem, 3.5vw + 1rem, 3rem);
  font-weight:700;
  letter-spacing:.18em;
  text-transform: lowercase;
  display:inline-block;
  line-height:1.2;
  /* シャンパンゴールドのグラデーション文字 */
  background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 .6px rgba(255,255,255,.3); /* 文字エッジを繊細に */
  position:relative;
}
.logo img { width: 76%; height; auto; }

/* ===============================
   Main message card (gold accent)
=============================== */
main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 20px 3rem;
  width: 100%;
  text-align: center;
}

.message {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 700px;
  font-size: clamp(1rem, 1vw + .9rem, 1.25rem);
  line-height: 2;
  padding: 2rem 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: 14px;
  border: 1px solid rgba(202,165,114,.4);
  box-shadow:
0 0 0 1px rgba(202,165,114,.15) inset,
0 10px 30px rgba(0,0,0,.35),
0 0 40px var(--gold-glow);
}

.message .tag{
  font-size:.8em;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:.6rem;
  padding:.3rem .8rem;
  background: linear-gradient(135deg, rgba(202,165,114,.25), rgba(255,255,255,.06));
}
.message p {
	padding: 0 2em;
}

.sp { display: none; }

/* スマートフォン表示時の調整 */
@media (max-width: 768px) {
  .message {
    width: 80%;
    max-width: none;
  }
  .sp { display: block; }
}

/* ===============================
   Footer / Company info
=============================== */
/* === Company Section (refine) === */
footer{
  width:100%;
  padding:2.6rem 20px 3.2rem;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.38));
}

.company-wrap{
  width:min(100%, 1024px);
  margin:0 auto;
}

.company-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  margin:0 auto 1.2rem;
  font-size: clamp(1.05rem, .4vw + 1rem, 1.25rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  background: linear-gradient(135deg, #e7d2b0, #caa572 60%, #a37845);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.company-title::before,
.company-title::after{
  content:"";
  height:1px;
  width:18%;
  max-width:160px;
  background: linear-gradient(90deg, rgba(231,210,176,0), rgba(231,210,176,.85), rgba(231,210,176,0));
}

.company-card{
  box-sizing: border-box;
  position:relative;
  max-width: 700px;
  border:1px solid rgba(202,165,114,.45);
  border-radius:14px;
  padding:1.4rem 0;
  margin: 0 auto 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:
0 0 0 1px rgba(202,165,114,.12) inset,
0 10px 26px rgba(0,0,0,.35),
0 0 36px rgba(202,165,114,.25);
}
@media (max-width: 768px){
  .company-card{ width: 80%; }
}

.company-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 2rem);
}

.side-panel{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.small-logo{
  width: 100px;
  margin: 0 auto;
  opacity: .95;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}


.info-item dt{
  /* 見出しの基本 */
  display:inline-block;
  position: relative;
  margin: 0 0 10px;
  padding: .1rem .1rem .45rem;
  font-size: .95rem;
  letter-spacing: .06em;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  white-space: nowrap;
}

/* 下部にゴールドライン */
.info-item dt::after{
  content: "";
  position: absolute;
  left: -30%;
  bottom: 0;
  width: 160%;/* テキスト幅に合わせる */
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e7d2b0, #caa572 60%, #a37845);
  box-shadow: 0 2px 10px rgba(202,165,114,.25);
  font-size: 1.1rem;
}

/* SP時：文字サイズをほんの少しだけ控えめに */
@media (max-width: 768px){
  .info-item dt{ font-size: .95rem; }
}


/* dd = 本文 */
.info-item dd{
  box-sizing: border-box;
  padding: 0 2em;
  margin:0 0 20px;
  line-height:1.9;
  font-size:.95rem;
}
/* SP時：文字サイズをほんの少しだけ控えめに */
@media (max-width: 768px){
  .info-item dt{ font-size: .93rem; }
}
/* サブパネル（ロゴ／連絡／免許など） */
.side-panel{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.small-logo{
  width:100px;
  margin:0;
  align-self:center;
  opacity:.95;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}

/* 連絡ボタン */
.contact-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:center;
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.3rem 2rem;
  border-radius:999px;
  border:1px solid rgba(202,165,114,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:var(--text-color);
  text-decoration:none;
  font-size:.92rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(202,165,114,.28);
  border-color: rgba(202,165,114,.8);
}

/* 注意書きや協会・免許を小さく上品に */
.meta-note{
  font-size:.88rem;
  opacity:.85;
  line-height:1.7;
  text-align:center;
}

/* コピーライト */
.copyright{
  width:min(100%, 1024px);
  margin:1.2rem auto 0;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:.85rem;
  opacity:.78;
}

/* ===============================
   Responsive tweaks
=============================== */
@media (max-width:768px){
  header{ margin-top:8vh; }
  .small-logo{ width:84px; }
}

.nolink {
  pointer-events: none;
  user-select: text;
  -webkit-touch-callout: none;
}