:root{
  --cms-blue:#004a98;
  --navy:#072d5f;
  --pink:#f65388;
  --text:#10243f;
  --muted:#65758c;
  --line:#d8e8f8;
  --shadow:0 22px 60px rgba(0,42,100,.12);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18px 18px, rgba(0,74,152,.07) 1.3px, transparent 1.3px) 0 0/22px 22px,
    linear-gradient(135deg,#f8fcff,#eef7ff 55%,#fff8f0);
}
.page{
  min-height:100svh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px 14px;
}
.panel{
  position:relative;
  overflow:hidden;
  width:min(1120px,100%);
  padding:34px 42px 0;
  border:1px solid #cfe0f4;
  border-radius:32px;
  background:rgba(255,255,255,.97);
  box-shadow:var(--shadow);
}
.panel:before{
  content:"";
  position:absolute;
  right:-110px;
  top:-120px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:rgba(0,74,152,.08);
}
.panel:after{
  content:"";
  position:absolute;
  left:-130px;
  bottom:52px;
  width:250px;
  height:250px;
  border-radius:50%;
  background:rgba(246,83,136,.08);
}
.header,.grid,.footer{position:relative;z-index:1}
.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:32px;
}
.logo{width:235px;max-width:58%;height:auto}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
  border-radius:999px;
  background:var(--cms-blue);
  color:#fff;
  font-weight:800;
  box-shadow:0 12px 24px rgba(0,74,152,.18);
}
.grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 370px;
  gap:44px;
  align-items:center;
}
.eyebrow{
  margin:0 0 10px;
  color:var(--cms-blue);
  font-size:16px;
  font-weight:800;
  letter-spacing:.03em;
}
h1{
  margin:0;
  color:var(--navy);
  font-size:clamp(44px,5.2vw,64px);
  line-height:1.06;
  letter-spacing:-.05em;
}
h1 span{color:var(--pink)}
.lead{
  margin:18px 0 26px;
  font-size:18px;
  line-height:1.8;
  font-weight:700;
}
.links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.link-card{
  min-height:86px;
  display:grid;
  grid-template-columns:62px 1fr 28px;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1.8px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  color:var(--text);
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,42,100,.06);
  transition:.16s ease;
}
.link-card:hover{
  transform:translateY(-2px);
  border-color:#b7d7f3;
  box-shadow:0 16px 30px rgba(0,42,100,.11);
}
.brand-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:15px;
  position:relative;
  overflow:hidden;
}
.brand-icon::before{
  content:"";
  width:30px;
  height:30px;
  background:#fff;
  -webkit-mask:var(--icon) center / contain no-repeat;
          mask:var(--icon) center / contain no-repeat;
}
.brand-youtube{
  background:#ff0000;
  --icon:url("https://cdn.jsdelivr.net/npm/simple-icons@13/icons/youtubeshorts.svg");
}
.brand-instagram{
  background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
  --icon:url("https://cdn.jsdelivr.net/npm/simple-icons@13/icons/instagram.svg");
}
.brand-tiktok{
  background:#111827;
  --icon:url("https://cdn.jsdelivr.net/npm/simple-icons@13/icons/tiktok.svg");
}
.brand-x{
  background:#111827;
  --icon:url("https://cdn.jsdelivr.net/npm/simple-icons@13/icons/x.svg");
}
.brand-line{
  background:#06c755;
  --icon:url("https://cdn.jsdelivr.net/npm/simple-icons@13/icons/line.svg");
}
.brand-cms{
  background:#fff;
  border:1px solid #d8e8f8;
  box-shadow:inset 0 0 0 1px rgba(0,74,152,.06);
}
.brand-cms::before{display:none}
.brand-cms img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:14px;
}
.link-text strong{
  display:block;
  font-size:18px;
  line-height:1.2;
}
.link-text small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.arrow{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--pink);
  position:relative;
}
.arrow:before{
  content:"";
  width:8px;
  height:8px;
  border-top:2.7px solid #fff;
  border-right:2.7px solid #fff;
  transform:rotate(45deg);
  margin-left:-2px;
}
.note{
  margin-top:18px;
  padding:20px 22px;
  border:1.8px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.90);
}
.note-title{
  margin:0 0 8px;
  color:var(--navy);
  font-size:24px;
  font-weight:900;
}
.note-title span{color:var(--pink)}
.note p:last-child{
  margin:0;
  line-height:1.75;
  font-weight:700;
}
.visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.haru-frame{
  width:370px;
  overflow:hidden;
  border:7px solid var(--cms-blue);
  border-radius:32px;
  background:#fff;
  box-shadow:0 22px 50px rgba(0,42,100,.18);
}
.haru-frame img{
  width:100%;
  height:610px;
  display:block;
  object-fit:cover;
  object-position:center top;
}
.haru-caption{
  width:100%;
  margin:0;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:var(--cms-blue);
  text-align:center;
  font-weight:800;
  box-shadow:0 8px 20px rgba(0,42,100,.08);
}
.footer{
  margin:28px -42px 0;
  padding:20px 30px;
  background:var(--navy);
  color:#fff;
  text-align:center;
  font-size:18px;
  font-weight:800;
}
@media(max-width:960px){
  .panel{padding:28px 24px 0}
  .grid{grid-template-columns:1fr;gap:28px}
  .visual{order:-1}
  .haru-frame{width:min(420px,100%)}
  .haru-frame img{height:560px}
  .footer{margin-left:-24px;margin-right:-24px}
}
@media(max-width:680px){
  .page{align-items:flex-start;padding:10px}
  .panel{border-radius:24px;padding:22px 16px 0}
  .header{align-items:center;margin-bottom:24px}
  .logo{width:180px;max-width:68%}
  .badge{padding:8px 14px;font-size:13px}
  h1{font-size:42px}
  .lead{font-size:16px}
  .links{grid-template-columns:1fr}
  .link-card{min-height:76px;grid-template-columns:56px 1fr 28px;padding:14px}
  .brand-icon{width:50px;height:50px;border-radius:14px}
  .brand-icon::before{width:28px;height:28px}
  .link-text strong{font-size:17px}
  .note{padding:17px}
  .note-title{font-size:22px}
  .haru-frame{border-width:6px;border-radius:26px}
  .haru-frame img{height:510px}
  .haru-caption{border-radius:18px;font-size:14px}
  .footer{margin:24px -16px 0;padding:18px 12px;font-size:15px}
}


/* v12: 見出しエリアを確実に左カラム内で中央揃え */
.intro-block{
  width:100%;
  max-width:640px;
  margin:0 auto 26px;
  text-align:center;
}
.intro-block .eyebrow,
.intro-block h1,
.intro-block .lead{
  text-align:center !important;
}
.intro-block .lead{
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:620px;
}

/* CMS公式サイトカードの正方形ロゴ */
.brand-cms{
  background:#fff;
  border:1px solid #d8e8f8;
  box-shadow:inset 0 0 0 1px rgba(0,74,152,.06);
  overflow:hidden;
}
.brand-cms::before{display:none !important;}
.brand-cms img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  padding:5px;
  border-radius:14px;
}


/* v17: ユーザー修正文言維持＋SP専用HARU画像＋右下コメント削除 */
.link-card{
  grid-template-columns:54px minmax(0,1fr) 28px;
  gap:12px;
}
.link-text{
  min-width:0;
}
.link-text small{
  font-size:12px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.haru-frame{
  position:relative;
}
.haru-frame picture{
  display:block;
}
.haru-frame picture img{
  display:block;
  width:100%;
}
.haru-caption{
  display:none !important;
}
.haru-nameplate{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:10px 28px;
  border-radius:999px;
  background:rgba(246,83,136,.94);
  color:#fff;
  font-size:22px;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:0 10px 24px rgba(246,83,136,.28);
  z-index:2;
}

@media(max-width:680px){
  .haru-frame img{
    height:auto !important;
    object-fit:contain !important;
    object-position:center top !important;
  }
  .link-text small{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    font-size:12px;
  }
  .haru-nameplate{
    min-width:150px;
    padding:8px 22px;
    font-size:18px;
    bottom:14px;
  }
}


/* v18: ひとりごと見出し中央寄せ */
.note-title{
  text-align:center;
}


/* v19: 説明ボックスを上へ移動し余白調整 */
.note-top{
  margin-top: 10px;
  margin-bottom: 18px;
}
.note-top .note-title{
  margin-bottom: 12px;
}
.note-top p:last-child{
  font-size: 15px;
  line-height: 1.85;
}
@media(max-width:680px){
  .note-top{
    margin-top: 8px;
    margin-bottom: 16px;
  }
  .note-top p:last-child{
    font-size: 14px;
    line-height: 1.8;
  }
}


/* v20: タイトル下の重複説明を削除したため余白を再調整 */
.intro-block .hero-title{
  margin-bottom: 18px;
}
@media(max-width:980px){
  .intro-block .hero-title{
    margin-bottom: 16px;
  }
}