:root{
  --ink:#14202B;
  --ink-soft:#4E5C68;
  --ink-faint:#8993A0;
  --accent:#1F5C8B;
  --accent-dark:#164468;
  --logo:#9A7AB8;
  --line:#DDE1E4;
  --paper:#FFFFFF;
  --paper-alt:#F5F6F7;
  --white:#FFFFFF;
  --body:'Noto Sans JP',sans-serif;
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.85;font-size:15.5px;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:var(--accent);}
.center-container {
  display: flex;
  justify-content: center; /* 左右の中央寄せ */
  align-items:flex-start;     /* 上下の中央寄せ */
  
  /* 高さを指定しないと上下の中央に配置されないため必要に応じて指定 */
  /*height: 100vh;*/ 
}
.wrap{max-width:var(--maxw);margin:24px auto;padding:0 24px;}
h1,h2,h3{font-weight:700;letter-spacing:.01em;color:var(--ink);line-height:1.5;}
h2{font-size:clamp(21px,2.8vw,28px);margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--accent);}
h3{font-size:17px;margin-bottom:10px;}
p{margin-bottom:14px;color:var(--ink-soft);}
ul,ol{margin:0 0 14px 22px;color:var(--ink-soft);}
li{margin-bottom:6px;}

.header-container {
  display: flex;          /* 子要素を横並びにする */
  align-items: center;    /* 垂直方向の中央揃え */
  gap: 16px;              /* h1と画像の間の余白（任意のサイズに変更可能） */
}

.header-container h1 {
  margin: 0;              /* h1のデフォルトの上下マージンをリセット */
  font-size: 24px;
}

.header-container img {
  height: 120px;           /* 画像の高さを指定（必要に応じて調整） */
  width: auto;            /* 比率を維持して自動調整 */
}

/* header */
header{border-bottom:1px solid var(--line);background:var(--white);position:sticky;top:0;z-index:20;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--maxw);margin:0 auto;flex-wrap:wrap;gap:12px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;text-decoration:none;color:var(--logo);}
.logo img{width:126px;height:36px;border-radius:6px;object-fit:cover;}
nav.main-nav{display:flex;flex-wrap:wrap;gap:4px;}
nav.main-nav a{color:var(--ink-soft);text-decoration:none;font-size:14px;padding:8px 14px;border-radius:4px;}
nav.main-nav a:hover{background:var(--paper-alt);color:var(--ink);}

/* hero */
.page-hero{background:var(--paper-alt);padding:52px 0;border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(24px,3.2vw,32px);}
.page-hero p{margin-top:10px;color:var(--ink-soft);max-width:60ch;}

.hero-lead{background:var(--ink);color:#fff;padding:56px 0;}
.hero-lead h1{color:#fff;font-size:clamp(22px,3vw,30px);margin-bottom:14px;}
.hero-lead p{color:#C7D0D8;max-width:70ch;margin:0 auto 10px;}
.hero-lead p:first-child{font-size:16px;color:#fff;}

/* sections */
section{padding:56px 0;border-bottom:1px solid var(--line);}
section[id]{scroll-margin-top:72px;}
section:last-of-type{border-bottom:none;}
.section-alt{background:var(--paper-alt);}

/* service grid on home */
.service-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.service-card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:24px;text-decoration:none;color:inherit;display:block;transition:box-shadow .15s ease,transform .15s ease;}
.service-card:hover{box-shadow:0 6px 18px rgba(20,32,43,.08);transform:translateY(-2px);}
.service-card img{width:44px;height:44px;object-fit:contain;margin-bottom:14px;}
.service-card h3{margin-bottom:8px;}
.service-card p{font-size:13.5px;margin:0;}
.service-card .more{font-size:12.5px;color:var(--accent);margin-top:10px;display:inline-block;}

/* video embed (click to play) */
.video-embed{position:relative;max-width:720px;margin:24px auto 0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#000;cursor:pointer;}
.video-embed img,.video-embed video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(20,32,43,.55);border:2px solid #fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:background .15s ease,transform .15s ease;}
.play-btn svg{width:26px;height:26px;fill:#fff;margin-left:4px;}
.video-embed:hover .play-btn{background:var(--accent);transform:translate(-50%,-50%) scale(1.08);}

/* image gallery */
.img-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:24px;}
.img-grid img{border-radius:8px;border:1px solid var(--line);width:100%;height:220px;object-fit:cover;}

/* info box (DM便 料金など) */
.info-box{background:var(--paper-alt);border:1px solid var(--line);border-radius:8px;padding:24px 28px;margin-top:20px;}
.info-box dl{display:grid;grid-template-columns:120px 1fr;gap:10px 16px;margin:0;}
.info-box dt{font-weight:700;color:var(--ink);}
.info-box dd{color:var(--ink-soft);margin:0;}
.info-box .note{margin-top:14px;font-size:13px;color:var(--ink-faint);}

/* fee list (開示請求手数料など) */
.fee-list{display:grid;grid-template-columns:140px 1fr;gap:8px 16px;margin:10px 0 14px;}
.fee-list dt{font-weight:700;color:var(--ink);}
.fee-list dd{color:var(--ink-soft);margin:0;}
.fee-note{font-size:13px;color:var(--ink-faint);margin-bottom:14px;}

/* company table */
table.profile{width:100%;border-collapse:collapse;margin-top:8px;}
table.profile th,table.profile td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top;}
table.profile th{width:160px;color:var(--ink-soft);font-weight:700;background:var(--paper-alt);}

.history-list{list-style:none;margin:0;counter-reset:h;}
.history-list li{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line);color:var(--ink-soft);font-size:14px;}
.history-list li b{color:var(--ink);font-weight:700;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:var(--accent);color:#fff;text-decoration:none;border-radius:6px;font-weight:700;font-size:14.5px;border:none;cursor:pointer;}
.btn:hover{background:var(--accent-dark);}

/* contact page */
.contact-block{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:26px;margin-bottom:18px;}
.contact-block h3{margin-bottom:6px;}
.contact-block .map-link{font-size:13.5px;}

form.simple-form .f-row{margin-bottom:16px;}
form.simple-form label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;}
form.simple-form input,form.simple-form textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:var(--body);font-size:14.5px;background:var(--paper-alt);}
form.simple-form textarea{min-height:130px;resize:vertical;}
form.simple-form input:focus-visible,form.simple-form textarea:focus-visible{outline:2px solid var(--accent);}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.form-notice{border-radius:8px;padding:14px 18px;margin-bottom:18px;font-size:14px;}
.notice-success{background:#EAF3EC;border:1px solid #BFDDC6;color:#1F6B36;}
.notice-error{background:#FBEAEA;border:1px solid #E6B8B8;color:#A13030;}

/* consent notice */
.consent-box{background:var(--paper-alt);border:1px solid var(--line);border-radius:8px;padding:22px 24px;margin:20px 0;font-size:13.5px;color:var(--ink-soft);}

/* footer */
footer{background:var(--ink);color:#B9C2CB;padding:44px 0 30px;}
footer .wrap{display:flex;flex-direction:column;gap:20px;}
footer nav{display:flex;flex-wrap:wrap;gap:16px;}
footer nav a{color:#DCE2E7;text-decoration:none;font-size:13.5px;}
footer nav a:hover{text-decoration:underline;}
.privacy-note{border-top:1px solid #2A3A48;padding-top:18px;}
.privacy-note summary{cursor:pointer;color:#DCE2E7;font-size:13.5px;font-weight:700;list-style:none;}
.privacy-note summary::-webkit-details-marker{display:none;}
.privacy-note summary::before{content:"▸ ";}
.privacy-note[open] summary::before{content:"▾ ";}
.privacy-note .body{margin-top:14px;font-size:12.5px;color:#9BA6B0;max-height:340px;overflow-y:auto;padding-right:10px;}
.privacy-note .body p{color:#9BA6B0;font-size:12.5px;margin-bottom:10px;}
footer .copyright{font-size:12px;color:#7C8894;}

@media(max-width:640px){
  .header-inner{flex-direction:column;align-items:flex-start;}
}