@charset "utf-8";

/* =========================================================
   THE HAUS ファンファンミートアップ 2026
   PC ： 左＝招待状（固定）／ 右＝モバイル幅のサイト本体
   SP ： 招待状 → サイト本体 の1カラム
   ========================================================= */

:root{
  --outer:       #d9e3e7;   /* 外側の地色（コットンブルー） */
  --paper:       #eaf0f1;   /* 招待状カードの紙色 */
  --ink:         #1e85c7;   /* 印刷インク（プロセスシアン） */
  --page:        #f9f9f9;   /* サイト本体の地色 */
  --panel:       #ebeff3;
  --btn:         #4c76ab;
  --blue:        #3a5f88;
  --deadline-bd: #a0afc0;
  --plan-blue:   #4a6e9c;
  --ink-text:    #111;
  --text:        #333;
  --note:        #4a4a4a;
  --orange:      #d9a63f;
  --gold:        #c9b183;
  --rule:        #b9cfe3;
  --dot:         #6b8bb5;

  --col:    480px;          /* 右カラムの幅 */
  --coverw: 500px;          /* 招待状カードの幅 */

  --serif:  "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic: "Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--outer);
  color:var(--text);
  font-family:var(--gothic);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,ul,dl,dd{ margin:0; padding:0; }
ul{ list-style:none; }
a{ text-decoration:none; }
img{ border:0; max-width:100%; }


/* =========================================================
   全体レイアウト
   ========================================================= */
.site{ width:100%; }

.column{
  width:var(--col);
  margin-inline:auto;
  background:var(--page);
  box-shadow:0 0 40px rgba(60,90,110,.10);
}


/* =========================================================
   左：招待状カード
   ========================================================= */
.cover{ padding:22px 16px 26px; }

.cover__card{
  position:relative;
  width:100%;
  max-width:420px;
  margin-inline:auto;
  padding:118px 26px 30px;
  border-radius:50% 50% 4px 4px / 26% 26% 4px 4px;
  background:var(--paper);
  box-shadow:0 10px 40px rgba(40,70,90,.10);
  text-align:center;
}

.cover__logo{
  display:block;
  width:206px;
  height:auto;
  margin:0 auto;
}

.cover__tag{
  display:block;
  width:172px;
  height:auto;
  margin:2px auto 0;
}

.cover__info{
  margin:20px auto 0;
  padding:16px 10px;
  border-top:1px solid rgba(30,133,199,.28);
  border-bottom:1px solid rgba(30,133,199,.28);
  max-width:300px;
  color:#22536f;
}
.cover__info > div{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:14px;
}
.cover__info > div + div{ margin-top:7px; }
.cover__info dt{
  flex:0 0 54px;
  padding:2px 0;
  border:1px solid rgba(30,133,199,.4);
  border-radius:2px;
  font-size:10.5px;
  letter-spacing:.06em;
  text-align:center;
  white-space:nowrap;
}
.cover__info dd{
  flex:0 0 168px;
  font-family:var(--serif);
  font-size:16px;
  font-weight:500;
  letter-spacing:.04em;
  text-align:left;
}
.cover__info dd small{ font-size:.78em; }

.cover__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:230px;
  height:48px;
  margin:20px auto 0;
  border-radius:24px;
  background:var(--ink);
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:.14em;
  text-indent:.14em;
  transition:background .2s;
}
.cover__cta:hover{ background:#1a76b1; }

.cover__brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  margin-top:24px;
}
.cover__brand img:first-child{ width:150px; height:auto; }
.cover__brand img:last-child { width:66px;  height:auto; }

/* 英字リード */
.cover__en{
  margin:13px auto 0;
  color:var(--ink);
  font-size:10px;
  line-height:1.9;
  letter-spacing:.14em;
  text-indent:.14em;
  opacity:.85;
}


/* =========================================================
   右カラムのヘッダー／フッター
   ========================================================= */
.col-head{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:56px;
  padding:0 16px;
  background:rgba(249,249,249,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid #e6e9ec;
}
.col-head__logo{ width:118px; height:auto; }
.col-head__cta{
  display:flex;
  align-items:center;
  height:32px;
  padding:0 16px;
  border-radius:16px;
  background:var(--btn);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}
.col-head__cta:hover{ background:#39649c; }

.col-foot{
  padding:26px 20px 30px;
  border-top:1px solid #e6e9ec;
  text-align:center;
}
.col-foot img{ width:132px; height:auto; }
.col-foot p{
  margin-top:10px;
  font-size:10.5px;
  letter-spacing:.06em;
  color:#7c8792;
}


/* =========================================================
   サイト本体（カラム内は常にモバイルレイアウト）
   ========================================================= */
.stage{ position:relative; padding-bottom:24px; }

.s{ display:block; max-width:100%; height:auto; }


/* ---------- HERO ---------- */
.hero{ padding:22px 20px 0; text-align:center; }

.hero-photo{
  width:100%;
  border-radius:10px;
}

.hero-title{
  margin-top:22px;
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.08em;
  text-indent:.08em;
  color:var(--ink-text);
}

.hero-lead{
  margin-top:14px;
  font-size:13.5px;
  line-height:1.95;
  letter-spacing:.02em;
}
.hero-lead p + p{ margin-top:8px; }
.hero-lead .mark{ color:var(--orange); }


/* ---------- CTA パネル ---------- */
.panel{
  margin:32px 16px 0;
  padding:24px 16px;
  border-radius:10px;
  background:var(--panel);
  text-align:center;
}


.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:100%;
  max-width:320px;
  height:60px;
  margin:16px auto 0;
  border-radius:6px;
  background:var(--btn);
  color:#fff;
  font-size:18px;
  font-weight:700;
  letter-spacing:.14em;
  text-indent:.14em;
  transition:background .2s;
}
.btn:hover{ background:#39649c; }
.btn__arrow{
  position:absolute;
  right:22px;
  font-size:21px;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-indent:0;
}

.note{
  margin-top:9px;
  font-size:11px;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--note);
}



/* ---------- セクション見出し ---------- */
.sec-head{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin-top:46px;
  padding:34px 20px 0;
}
.sec-head--plain{ padding-top:0; }

.flag{
  position:absolute;
  top:0; left:50%;
  width:24px;
  transform:translateX(-50%);
}
.sec-title{
  order:2;
  padding:0 12px;
  font-family:var(--serif);
  font-size:21px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.1em;
  text-indent:.1em;
  color:var(--ink-text);
}
.rule{
  height:2px;
  background-image:linear-gradient(to right,var(--rule) 4px,transparent 4px);
  background-size:6.4px 2px;
}
.rule--l{ order:1; flex:1 1 0; min-width:0; }
.rule--r{ order:3; flex:1 1 0; min-width:0; }

.sec-lead{
  order:4;
  flex:0 0 100%;
  margin-top:12px;
  font-size:12.5px;
  line-height:1.7;
  letter-spacing:.02em;
  text-align:center;
}


/* ---------- イベント・企画内容 ---------- */
.plans{ padding:0 20px; }

.plan{ margin-top:34px; text-align:center; }

.plan-label{
  font-size:13px;
  line-height:1.6;
  letter-spacing:.03em;
  color:#28282a;
}
.slash{ position:relative; display:inline-block; padding:0 22px; }
.slash::before,
.slash::after{
  content:"";
  position:absolute;
  top:4px;
  width:1.5px;
  height:16px;
  background:var(--gold);
}
.slash::before{ left:8px;  transform:rotate(-20deg); }
.slash::after { right:8px; transform:rotate(20deg); }

.plan-title{
  margin:6px 0 14px;
  font-size:21px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.1em;
  text-indent:.1em;
  color:var(--plan-blue);
}

.plan-photo{ width:100%; border-radius:6px; }

.items{
  margin:16px auto 0;
  max-width:400px;
  font-size:13.5px;
  line-height:1.75;
  letter-spacing:.02em;
  text-align:left;
}
.items li{
  position:relative;
  margin-bottom:8px;
  padding-left:14px;
}
.items li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--dot);
}


/* 企画内の強調（罫囲み） */
.plan-notice{
  margin:14px auto 0;
  max-width:400px;
  padding:11px 12px;
  border:2px solid var(--btn);
  border-radius:8px;
  color:var(--blue);
  font-size:13px;
  font-weight:700;
  line-height:1.7;
  letter-spacing:.02em;
  text-align:center;
}


/* ---------- ご出欠について ---------- */
.attend{ margin:36px 16px 0; }
.attend__box{
  padding:16px 18px;
  border-radius:10px;
  background:var(--panel);
}
.attend__box h3{
  margin-bottom:7px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--blue);
  text-align:center;
}
.attend__box p{
  font-size:12.5px;
  line-height:1.9;
  letter-spacing:.02em;
}


/* ---------- クロージング ---------- */
.closing{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:center;
  margin-top:46px;
  padding:0 20px 76px;
  text-align:center;
}
.closing-illust{ order:1; flex:0 0 100%; width:100%; max-width:390px; margin:0 auto 4px; }
.closing-balloon{
  order:9;
  position:absolute;
  right:8px; bottom:6px;
  width:54px;
}

.closing-title{
  order:3;
  flex:0 0 100%;
  margin-top:4px;
  font-family:var(--serif);
  font-size:18px;
  font-weight:500;
  line-height:1.7;
  letter-spacing:.04em;
  text-indent:.04em;
  color:var(--ink-text);
}
.closing-lead{
  order:4;
  flex:0 0 100%;
  margin-top:14px;
  font-size:13px;
  font-weight:700;
  line-height:1.7;
  letter-spacing:.02em;
  color:var(--blue);
}
.deadline{
  order:5;
  flex:0 0 100%;
  max-width:380px;
  margin:16px auto 0;
  padding:9px 8px;
  border:2px solid var(--deadline-bd);
  border-radius:8px;
  background:#fff;
  color:var(--blue);
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.04em;
  text-indent:.04em;
}
.btn--3 { order:6; flex:0 0 100%; }
.note--3{ order:7; flex:0 0 100%; }
.note--4{ order:8; flex:0 0 100%; margin-top:12px; }


/* =========================================================
   タブレット・スマートフォン（〜1099px）
   招待状を上に、サイト本体をその下に積む
   ========================================================= */
@media (max-width:520px){
  .column{
    width:100%;
    box-shadow:none;
  }
}

@media (max-width:400px){
  /* 狭い画面で1行が溢れないよう微調整 */
  .hero{ padding-left:14px; padding-right:14px; }
  .hero-lead{ font-size:12.8px; letter-spacing:0; }

  .cover__card{ padding:96px 18px 26px; }
  .cover__logo{ width:174px; }
  .cover__tag { width:150px; }
  .cover__info dt{ flex-basis:48px; font-size:10px; }
  .cover__info dd{ flex-basis:164px; font-size:14.5px; }
  .cover__info > div{ gap:10px; }
  .cover__brand{ gap:18px; }
  .cover__brand img:first-child{ width:126px; }
  .cover__brand img:last-child { width:56px; }
}


/* =========================================================
   「参加できない」リンク ＋ 回答モーダル
   ========================================================= */
.decline{
  display:inline-block;
  padding:4px 6px;
  border:0;
  background:none;
  color:#516475;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:.04em;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  cursor:pointer;
  transition:color .2s;
}
.decline:hover{ color:var(--blue); }
.decline.is-done{
  color:#a8b1ba;
  text-decoration:none;
  cursor:default;
}

/* 招待状カード内・最下部は中央に、少し余白を空けて */
.cover__cta + .decline,
.note--3 + .decline{
  display:block;
  margin:12px auto 0;
}
.note--3 + .decline{ order:8; flex:0 0 100%; }

/* ヘッダー内 */
.col-head__actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.col-head__actions .decline{ font-size:12px; }


/* ---------- モーダル ---------- */
body.is-modal-open{ overflow:hidden; }

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal[hidden]{ display:none; }

.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(30,50,70,.45);
}

.modal__card{
  position:relative;
  width:100%;
  max-width:360px;
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  padding:34px 26px 30px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 16px 40px rgba(30,50,70,.25);
  text-align:center;
}

.modal__close{
  position:absolute;
  top:6px; right:8px;
  width:34px; height:34px;
  border:0;
  background:none;
  color:#93a0ac;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.modal__close:hover{ color:var(--blue); }

.modal__title{
  font-family:var(--serif);
  font-size:18px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--ink-text);
}

.modal__lead{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.85;
  letter-spacing:.02em;
  color:var(--text);
}

.modal__form{
  margin-top:22px;
  padding-top:20px;
  border-top:1px dashed #dfe5eb;
}

.modal__ask{
  font-size:12.5px;
  line-height:1.7;
  letter-spacing:.02em;
  color:var(--text);
}

.modal__label{
  display:block;
  margin-top:14px;
  margin-bottom:5px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--blue);
  text-align:left;
}

.modal__input{
  display:block;
  width:100%;
  height:46px;
  padding:0 14px;
  border:1px solid #cfd8e0;
  border-radius:6px;
  background:#fff;
  color:var(--ink-text);
  font-family:inherit;
  font-size:15px;
}
.modal__input:focus{
  outline:0;
  border-color:var(--btn);
  box-shadow:0 0 0 3px rgba(76,118,171,.15);
}

/* ボット除け（画面には出さない） */
.modal__hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
}

.modal__error{
  margin-top:8px;
  color:#c0392b;
  font-size:11.5px;
  line-height:1.6;
  text-align:left;
}
.modal__error[hidden]{ display:none; }

.modal__submit{
  display:block;
  width:100%;
  height:50px;
  margin-top:18px;
  border:0;
  border-radius:6px;
  background:var(--btn);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  text-indent:.12em;
  cursor:pointer;
  transition:background .2s;
}
.modal__submit:hover{ background:#39649c; }
.modal__submit:disabled{ background:#9aabc0; cursor:default; }

.modal__submit--close{
  margin-top:22px;
  background:#fff;
  border:1px solid var(--btn);
  color:var(--btn);
}
.modal__submit--close:hover{ background:#eef3f9; }