/* Typography and UI refinement based on the supplied reference captures */
:root{
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
body{
  font-size:13px;
  line-height:2.05;
  letter-spacing:.055em;
  font-weight:300;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
p,li,dd,dt{font-weight:300}
.page-width{width:min(1280px,calc(100% - clamp(48px,10vw,180px)))}
.section-space{padding-block:clamp(105px,12vw,190px)}
.eyebrow{font-size:9px;letter-spacing:.24em;margin-bottom:18px;font-weight:400}
.section-head{gap:clamp(42px,7vw,96px);margin-bottom:64px}
.section-head h2{
  font-size:clamp(24px,2.25vw,34px);
  line-height:1.58;
  letter-spacing:.075em;
  font-weight:400;
}
.section-head p{font-size:12px;line-height:2.15;max-width:520px}
.text-link{gap:18px;padding-bottom:6px;font-size:10.5px;letter-spacing:.1em}
.button{padding:9px 17px;min-height:38px;font-family:var(--sans);font-size:10.5px;letter-spacing:.055em}

/* Compact, quiet header */
.site-header{
  height:68px;
  padding:8px clamp(18px,2.4vw,40px);
}
.site-header__logo{width:168px}
.site-header__nav{
  gap:0 22px;
  font-size:10.5px;
  line-height:1.8;
  letter-spacing:.035em;
  font-weight:400;
}
.site-header__actions{gap:7px;font-size:9.5px;letter-spacing:.035em}
.header-cta{
  border-radius:2px;
  padding:6px 11px;
  min-height:30px;
  display:inline-flex;
  align-items:center;
}
.menu-button{
  padding:8px 7px;
  font-size:9px;
  letter-spacing:.16em;
}
.menu-button::before{font-size:9px;margin-right:6px}

/* Hero typography */
.hero__copy{bottom:42px}
.hero__copy h1{
  font-size:clamp(18px,1.55vw,24px);
  line-height:1.85;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.hero__copy p{font-size:10.5px;line-height:1.9;letter-spacing:.07em}
.hero__scroll{font-size:8px}

/* Full-screen menu */
.global-menu__top{padding:17px clamp(22px,4vw,62px)}
.global-menu__top img{width:168px}
.global-menu__close{font-size:9.5px;padding:10px}
.global-menu__grid{
  width:min(1120px,calc(100% - 96px));
  margin:54px auto 46px;
  gap:0 64px;
}
.menu-group{padding:20px 0 30px}
.menu-group h2{
  font-size:clamp(20px,2.15vw,30px);
  line-height:1.5;
  letter-spacing:.055em;
  margin-bottom:17px;
}
.menu-group h2 small{font-size:8.5px;margin-right:14px}
.menu-group li{margin:5px 0}
.menu-group a,.menu-group button{font-size:10.5px}
.global-menu__footer{padding:24px clamp(22px,4vw,62px);font-size:9.5px}

/* One-column vertical copy, read from right to left */
.statement{
  min-height:800px;
  padding:140px 6vw 120px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.statement__composition{
  width:min(1220px,88vw);
  min-height:470px;
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(72px,10vw,180px);
}
.statement__title{
  writing-mode:vertical-rl;
  text-orientation:upright;
  white-space:nowrap;
  margin:0;
  font-size:17px;
  line-height:1.75;
  letter-spacing:.12em;
  font-weight:400;
}
.vertical-statement{
  writing-mode:horizontal-tb;
  height:auto;
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(18px,2vw,34px);
  line-height:normal;
  letter-spacing:normal;
}
.vertical-statement p{
  writing-mode:vertical-rl;
  text-orientation:upright;
  white-space:nowrap;
  margin:0;
  font-size:12px;
  line-height:1.65;
  letter-spacing:.095em;
  font-weight:300;
}
.statement__label{left:6vw;top:150px;font-size:8px;letter-spacing:.25em}
.statement__link{right:7vw;bottom:95px}

/* Portal and card typography */
.portal__num{font-size:8.5px}
.portal__title{font-size:17px;letter-spacing:.055em;bottom:82px}
.portal__copy{font-size:9.5px;line-height:1.8;bottom:34px}
.filter-button{padding:6px 12px;font-size:9.5px}
.work-card__meta{padding-top:16px}
.work-card__meta small{font-size:8.5px}
.work-card__meta h3{font-size:15px;line-height:1.75;margin:6px 0}
.work-card__meta p{font-size:10.5px}
.performance-item span,.product-card small{font-size:8.5px}
.performance-item h3{font-size:18px;margin:28px 0 12px}
.performance-item p,.product-card p{font-size:11.5px;line-height:2}
.product-card h3{font-size:18px;margin:9px 0}
.price-story__text h2,.company-story__text h2{
  font-size:clamp(24px,2.65vw,40px);
  line-height:1.65;
  margin:16px 0 26px;
}
.event-status{font-size:8.5px}
.event-card__body h3{font-size:15px;line-height:1.8;min-height:58px}
.event-card__body p{font-size:11.5px}
.event-meta{font-size:9.5px!important}
.card-actions>a{font-size:10px}
.land-table th{font-size:9px}
.review-badge{font-size:8.5px}
.news-row time,.news-row span{font-size:9.5px}
.news-row strong{font-size:12px;font-weight:400}
.faq-item summary{padding:20px 4px;font-size:13px}
.faq-item summary span{font-size:16px}
.panorama__copy span{font-size:8px}
.panorama__copy p{font-size:15px;line-height:2}
.cta-card h3{font-size:21px}
.cta-card p{font-size:10.5px}
.footer__brand p{font-size:10.5px}
.footer__links h3{font-size:13px}
.footer__links a{font-size:9.5px}
.footer__bottom{font-size:8.5px}
.form-panel h2{font-size:25px}
.form-field label{font-size:10.5px}
.form-field input,.form-field select,.form-field textarea{font-size:14px}
.works-drawer__header h2{font-size:20px}

@media(max-width:1024px){
  .site-header{height:62px}
  .site-header__logo{width:148px}
  .statement__composition{gap:clamp(44px,8vw,90px)}
  .statement__title{font-size:16px}
  .vertical-statement{gap:20px}
  .vertical-statement p{font-size:11.5px}
}

@media(max-width:767px){
  body{font-size:12.5px;line-height:2.05}
  .page-width{width:calc(100% - 36px)}
  .section-space{padding-block:82px}
  .section-head{gap:20px;margin-bottom:40px}
  .section-head h2{font-size:23px;line-height:1.6}
  .section-head p{font-size:11.5px}
  .eyebrow{font-size:8px;margin-bottom:13px}
  .text-link{font-size:9.5px}
  .button{font-size:10px;min-height:36px;padding:8px 14px}

  .site-header{
    height:56px;
    padding:6px 10px 6px 14px;
  }
  .site-header__logo{width:124px}
  .site-header__actions{gap:2px}
  .menu-button{font-size:8px;padding:7px 5px}
  .menu-button::before{font-size:8px;margin-right:4px}

  .hero__brand{width:190px}
  .hero__copy{right:18px;left:18px;bottom:72px}
  .hero__copy h1{font-size:17px;line-height:1.85}
  .hero__copy p{font-size:9.5px}

  .statement{
    min-height:640px;
    padding:88px 18px 88px;
    align-items:center;
  }
  .statement__composition{
    width:100%;
    min-height:390px;
    gap:24px;
    justify-content:center;
  }
  .statement__title{
    font-size:14px;
    line-height:1.65;
    letter-spacing:.08em;
  }
  .vertical-statement{gap:11px}
  .vertical-statement p{
    font-size:10.5px;
    line-height:1.55;
    letter-spacing:.045em;
  }
  .statement__label{left:10px;top:82px;font-size:7px}
  .statement__link{right:18px;bottom:48px}

  .portal__title{font-size:15px;bottom:56px}
  .portal__copy{font-size:8.5px;bottom:20px}
  .work-card__meta h3{font-size:14px}
  .performance-item h3,.product-card h3{font-size:16px}
  .price-story__text h2,.company-story__text h2{font-size:23px}
  .news-row strong{font-size:11.5px}
  .panorama__copy p{font-size:13px}
  .cta-card h3{font-size:19px}

  .global-menu__top{padding:13px 18px}
  .global-menu__top img{width:132px}
  .global-menu__grid{width:calc(100% - 36px);margin:26px auto}
  .menu-group{padding:15px 0 18px}
  .menu-group h2{font-size:18px;margin-bottom:12px}
  .menu-group h2 small{font-size:8px}
  .menu-group a,.menu-group button{font-size:10px}
  .global-menu__footer{padding:18px;font-size:8.5px;line-height:1.9}

  .form-panel h2{font-size:22px}
  .form-field input,.form-field select,.form-field textarea{font-size:16px}
  .mobile-cta a,.mobile-cta button{min-height:56px;font-size:8.5px}
}

/* =========================================================
   HAUSQA 2026 hero / menu / concept refinements
   ========================================================= */

/* Header: keep only a quiet menu trigger on the right */
.site-header{
  position:absolute;
  inset:0 0 auto;
  z-index:3000;
  height:76px;
  padding:18px clamp(18px,3.4vw,56px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  background:transparent;
  border-bottom:0;
  color:#f5f1ea;
  pointer-events:none;
}
.site-header.is-fixed{
  position:fixed;
  background:transparent;
  backdrop-filter:none;
  border-bottom:0;
  color:#2b2621;
}
.site-header.is-hidden{transform:translateY(-105%)}
.site-header__nav,
.site-header__logo,
.header-cta{display:none!important}
.site-header__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0;
  pointer-events:auto;
}
.menu-button{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:38px;
  padding:9px 14px 9px 16px;
  border:1px solid rgba(245,241,234,.62);
  border-radius:2px;
  background:rgba(43,38,33,.18);
  color:inherit;
  backdrop-filter:blur(10px);
  cursor:pointer;
  font-family:var(--sans);
  font-size:10px;
  line-height:1;
  letter-spacing:.16em;
  transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease),transform .28s var(--ease);
}
.menu-button::before{content:none!important}
.site-header.is-fixed .menu-button{
  background:rgba(245,241,234,.78);
  border-color:rgba(43,38,33,.2);
}
.menu-button:hover{
  background:rgba(245,241,234,.92);
  border-color:rgba(245,241,234,.9);
  color:#2b2621;
  transform:translateY(-1px);
}
.menu-button__icon{
  width:22px;
  height:8px;
  position:relative;
  display:inline-grid;
  gap:6px;
}
.menu-button__icon span{
  display:block;
  height:1px;
  background:currentColor;
  transform-origin:right center;
  transition:transform .28s var(--ease),opacity .28s var(--ease);
}
.menu-button:hover .menu-button__icon span:first-child{transform:scaleX(.72)}
.menu-button:hover .menu-button__icon span:last-child{transform:scaleX(1.08)}

/* Hero */
.hero{
  min-height:680px;
  border-radius:0;
}
.hero::after{
  background:
    radial-gradient(circle at 50% 48%,rgba(0,0,0,.04),rgba(0,0,0,.18) 62%,rgba(0,0,0,.32)),
    linear-gradient(90deg,rgba(33,29,24,.48),rgba(33,29,24,.16) 40%,rgba(33,29,24,.34)),
    linear-gradient(0deg,rgba(21,18,15,.52),rgba(21,18,15,.12) 46%,rgba(21,18,15,.34));
}
.hero__brand{
  z-index:2;
  width:min(330px,28vw);
  max-width:70%;
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.28));
}
.hero__copy{
  position:absolute;
  z-index:2;
  top:clamp(86px,12vh,136px);
  left:clamp(24px,5.8vw,82px);
  right:auto;
  bottom:auto;
  width:min(520px,calc(100% - 48px));
  color:#f7f2e9;
  text-align:left;
}
.hero__copy h1{
  margin:0;
  font-size:clamp(18px,1.62vw,25px);
  line-height:1.85;
  letter-spacing:.095em;
  font-weight:400;
  text-shadow:0 18px 34px rgba(0,0,0,.35);
}
.hero__copy p{display:none}
.hero__cta{
  position:absolute;
  z-index:3;
  right:clamp(22px,4.2vw,68px);
  bottom:clamp(28px,5.2vh,58px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:128px;
  min-height:42px;
  padding:0 22px;
  border:1px solid rgba(245,241,234,.72);
  border-radius:2px;
  background:rgba(35,30,25,.28);
  color:#f8f3ea;
  backdrop-filter:blur(12px);
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.1em;
  cursor:pointer;
  transition:background .32s var(--ease),border-color .32s var(--ease),color .32s var(--ease),transform .32s var(--ease);
}
.hero__cta:hover{
  background:rgba(245,241,234,.94);
  border-color:rgba(245,241,234,.94);
  color:#2b2621;
  transform:translateY(-2px);
}

/* Global menu: smaller, calmer, more premium */
.global-menu{
  background:#28231f;
  color:#f5f1ea;
  overflow:auto;
}
.global-menu::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 18%,rgba(183,155,118,.16),transparent 32%),
    linear-gradient(135deg,rgba(255,255,255,.04),transparent 42%);
}
.global-menu__top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px clamp(24px,5vw,72px);
  border-bottom:1px solid rgba(245,241,234,.14);
}
.global-menu__top img{display:none}
.global-menu__label{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.22em;
  color:rgba(245,241,234,.62);
}
.global-menu__close{
  min-height:36px;
  padding:8px 0 8px 18px;
  border:0;
  background:transparent;
  color:rgba(245,241,234,.82);
  cursor:pointer;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.14em;
}
.global-menu__close:hover{color:#fff}
.global-menu__body{
  position:relative;
  z-index:1;
  width:min(860px,calc(100% - clamp(48px,12vw,180px)));
  margin:clamp(46px,8vw,86px) auto 42px;
}
.global-menu__nav{
  display:grid;
  gap:0;
}
.global-menu__nav a,
.global-menu__nav button{
  display:grid;
  grid-template-columns:48px 1fr;
  align-items:center;
  width:100%;
  padding:17px 0;
  border:0;
  border-bottom:1px solid rgba(245,241,234,.13);
  background:transparent;
  color:#f7f1e8;
  text-align:left;
  font-family:var(--serif);
  font-size:clamp(18px,2vw,25px);
  line-height:1.45;
  letter-spacing:.055em;
  font-weight:400;
  cursor:pointer;
  transition:color .25s var(--ease),padding-left .25s var(--ease),border-color .25s var(--ease);
}
.global-menu__nav span{
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:.12em;
  color:rgba(245,241,234,.42);
}
.global-menu__nav a:hover,
.global-menu__nav button:hover{
  color:#d9c5a8;
  padding-left:8px;
  border-color:rgba(217,197,168,.35);
}
.global-menu__info{
  display:flex;
  justify-content:space-between;
  gap:28px;
  margin-top:34px;
  padding-top:22px;
  color:rgba(245,241,234,.54);
  border-top:1px solid rgba(245,241,234,.1);
  font-family:var(--sans);
  font-size:10px;
  line-height:1.9;
  letter-spacing:.06em;
}
.global-menu__info p{margin:0}
.global-menu__grid,
.global-menu__footer{display:none!important}

/* Concept section */
.statement.statement--hausqa{
  min-height:auto;
  display:block;
  padding:clamp(110px,13vw,190px) 0;
  background:#f6f2ea;
}
.statement--hausqa .statement__body{
  width:min(860px,calc(100% - clamp(42px,12vw,190px)));
  margin:0 auto;
}
.statement--hausqa .statement__label{
  position:static;
  writing-mode:horizontal-tb;
  margin:0 0 24px;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.22em;
  color:#8a7b69;
}
.statement--hausqa .statement__title{
  writing-mode:horizontal-tb;
  text-orientation:mixed;
  white-space:normal;
  margin:0 0 clamp(34px,4.8vw,58px);
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.55;
  letter-spacing:.07em;
  font-weight:400;
  color:#2b2621;
}
.statement--hausqa .statement__text{
  max-width:820px;
}
.statement--hausqa .statement__text p{
  margin:0 0 1.55em;
  font-size:clamp(15px,1.24vw,17px);
  line-height:2.05;
  letter-spacing:.055em;
  color:#3a342e;
}
.statement--hausqa .statement__text p:last-child{margin-bottom:0}

/* Portal images are visual blocks, not links */
.portals{background:#1f1b17}
.portal{
  display:block;
  cursor:default;
}
.portal:hover img{transform:none}
.portal__arrow{display:none!important}

/* Responsive refinements */
@media(max-width:1024px){
  .site-header{height:68px;padding:14px 22px}
  .hero__brand{width:min(280px,38vw)}
  .hero__copy{top:92px;left:28px}
  .global-menu__body{width:min(760px,calc(100% - 64px))}
  .global-menu__nav a,
  .global-menu__nav button{font-size:21px;padding:16px 0}
}
@media(max-width:767px){
  body{padding-bottom:66px}
  .site-header{height:60px;padding:10px 14px}
  .menu-button{
    min-height:34px;
    padding:8px 11px 8px 12px;
    gap:9px;
    font-size:9px;
  }
  .menu-button__icon{width:19px}
  .hero{
    min-height:620px;
  }
  .hero__brand{
    width:210px;
  }
  .hero__copy{
    top:82px;
    left:20px;
    right:20px;
    width:auto;
  }
  .hero__copy h1{
    font-size:17px;
    line-height:1.9;
    letter-spacing:.075em;
  }
  .hero__cta{
    right:18px;
    bottom:26px;
    min-width:104px;
    min-height:38px;
    padding:0 16px;
    font-size:12px;
  }
  .hero__scroll{display:none}
  .global-menu__top{padding:18px 20px}
  .global-menu__body{
    width:calc(100% - 40px);
    margin:28px auto 30px;
  }
  .global-menu__nav a,
  .global-menu__nav button{
    grid-template-columns:38px 1fr;
    padding:15px 0;
    font-size:17px;
    letter-spacing:.045em;
  }
  .global-menu__nav span{font-size:8px}
  .global-menu__info{
    display:block;
    margin-top:26px;
    font-size:9px;
  }
  .global-menu__info p + p{margin-top:8px}
  .statement.statement--hausqa{
    padding:84px 0 92px;
  }
  .statement--hausqa .statement__body{
    width:calc(100% - 40px);
  }
  .statement--hausqa .statement__label{
    font-size:8px;
    margin-bottom:18px;
  }
  .statement--hausqa .statement__title{
    font-size:25px;
    line-height:1.65;
    margin-bottom:30px;
  }
  .statement--hausqa .statement__text p{
    font-size:14px;
    line-height:2;
    letter-spacing:.035em;
  }
}


/* Step 8 responsive refinements */
.works-track--marquee .work-card__meta h3{
  font-size:clamp(15px,1.25vw,18px);
}
.works-track--marquee .work-card__meta small{
  font-size:10px;
}
@media(max-width:1024px){
  /* .event-grid--home は .event-grid と併用しているため、他ページ用カルーセル指定
     （grid-auto-flow等）を明示的に打ち消してからカラム数を指定する */
  .event-grid--home{
    display:grid;
    grid-auto-flow:row;
    overflow-x:visible;
    scroll-snap-type:none;
    margin-right:0;
    padding-right:0;
  }
  .event-grid--home,
  .reading-grid{
    grid-template-columns:1fr 1fr;
  }
  /* 汎用 .event-card:last-child{grid-column:1/-1;max-width:50%} が3枚構成のここにも
     効いてしまい、3枚目だけ半分幅で余白だらけになるため打ち消す */
  .event-grid--home .event-card:last-child{
    grid-column:auto;
    max-width:none;
  }
  .works-track--marquee .work-card{
    flex-basis:clamp(250px,42vw,380px);
  }
}
@media(max-width:767px){
  .section-head--works{
    margin-bottom:38px;
  }
  .works-marquee{
    overflow-x:auto;
    padding-inline:24px;
    scroll-snap-type:x mandatory;
  }
  .works-track--marquee{
    animation:none;
    width:max-content;
  }
  .works-marquee__group{
    gap:16px;
    padding-inline:0;
  }
  .works-marquee__group[aria-hidden="true"]{
    display:none;
  }
  .works-track--marquee .work-card{
    flex:0 0 min(74vw,320px);
    scroll-snap-align:start;
  }
  .works-track--marquee .work-card__meta h3{
    font-size:14.5px;
    line-height:1.7;
  }
  /* .event-grid と併用しているぶん、767px幅でもカルーセル指定を明示的に打ち消す
     （打ち消さないと grid-auto-flow:column が残り、横スクロールのまま崩れて見える） */
  .event-grid--home{
    display:grid;
    grid-auto-flow:row;
    overflow-x:visible;
    scroll-snap-type:none;
    margin-right:0;
    padding-right:0;
  }
  .event-grid--home,
  .reading-grid{
    grid-template-columns:1fr;
  }
  .event-grid--home .event-card{
    scroll-snap-align:none;
  }
  .event-grid--home .event-card__body p:last-of-type{
    min-height:0;
  }
  .reading-card{
    min-height:auto;
    padding-top:19px;
  }
  .reading-card h3{
    font-size:18px;
    margin:22px 0 12px;
  }
  .reading-footer{
    justify-content:flex-start;
  }
}

@media(max-width:767px){.footer__links{grid-template-columns:1fr}}


/* Step 9: hero copy two-line layout and upper-right CTA group */
.site-header{
  padding-top:clamp(14px,2.2vw,26px);
  padding-right:clamp(16px,3.4vw,56px);
}
.site-header__actions{
  gap:8px;
  flex-wrap:nowrap;
}
.header-contact,
.header-tel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 15px;
  border:1px solid rgba(245,241,234,.62);
  border-radius:2px;
  background:rgba(43,38,33,.20);
  color:inherit;
  backdrop-filter:blur(10px);
  font-family:var(--sans);
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
  white-space:nowrap;
  cursor:pointer;
  transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease),transform .28s var(--ease);
}
.header-contact{
  appearance:none;
  -webkit-appearance:none;
}
.header-tel{
  gap:8px;
}
.header-tel__label{
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(245,241,234,.68);
}
.header-contact__sp{display:none}
.header-contact:hover,
.header-tel:hover{
  background:rgba(245,241,234,.92);
  border-color:rgba(245,241,234,.92);
  color:#2b2621;
  transform:translateY(-1px);
}
.header-tel:hover .header-tel__label{color:rgba(43,38,33,.62)}
.site-header.is-fixed .header-contact,
.site-header.is-fixed .header-tel,
.site-header.is-fixed .menu-button{
  background:rgba(245,241,234,.82);
  border-color:rgba(43,38,33,.2);
  color:#2b2621;
}
.site-header.is-fixed .header-tel__label{color:rgba(43,38,33,.58)}

.hero__copy{
  top:clamp(86px,10.5vh,126px);
  left:clamp(22px,5.2vw,72px);
  width:min(520px,calc(100% - 44px));
}
.hero__copy h1{
  font-size:clamp(15px,1.28vw,21px);
  line-height:1.82;
  letter-spacing:.095em;
  margin:0;
}
.hero__copy p,
.hero__copy .hero__subcopy{
  display:block!important;
  margin:clamp(15px,1.8vw,23px) 0 0;
  font-family:var(--serif);
  font-size:clamp(10px,.78vw,12px);
  line-height:2;
  letter-spacing:.075em;
  color:rgba(247,242,233,.88);
  text-shadow:0 14px 28px rgba(0,0,0,.34);
}
.hero__cta{display:none!important}

@media(max-width:1024px){
  .site-header__actions{gap:7px}
  .header-contact,
  .header-tel{
    min-height:36px;
    padding-inline:12px;
    font-size:9.5px;
  }
  .hero__copy{
    top:86px;
    left:28px;
    width:min(460px,calc(100% - 56px));
  }
  .hero__copy h1{
    font-size:18px;
  }
}
@media(max-width:767px){
  .site-header{
    padding:10px 12px;
  }
  .site-header__actions{
    width:100%;
    justify-content:flex-end;
    gap:5px;
  }
  .header-contact,
  .header-tel,
  .menu-button{
    min-height:34px;
    padding-inline:9px;
    font-size:8.5px;
    letter-spacing:.1em;
  }
  .header-contact__pc{display:none}
  .header-contact__sp{display:inline}
  .header-tel{
    gap:0;
    padding-inline:10px;
  }
  .header-tel__number{display:none}
  .header-tel__label{
    font-size:8.5px;
    letter-spacing:.13em;
    color:currentColor;
  }
  .menu-button{
    gap:7px;
  }
  .hero__copy{
    top:78px;
    left:18px;
    right:18px;
    width:auto;
  }
  .hero__copy h1{
    font-size:15px;
    line-height:1.85;
    letter-spacing:.075em;
  }
  .hero__copy p,
  .hero__copy .hero__subcopy{
    margin-top:13px;
    font-size:9.5px;
    line-height:1.95;
    letter-spacing:.05em;
  }
}


/* Step 10 responsive */
@media(max-width:1024px){
  .hero__copy{
    top:96px;
    left:28px;
    max-width:320px;
  }
  .hero__copy h1{
    font-size:18px;
    line-height:1.9;
  }
  .hero__note{
    right:28px;
    bottom:90px;
    max-width:320px;
  }
  .hero__note p{
    font-size:10.5px;
    line-height:1.95;
  }
  .portals{
    grid-template-columns:repeat(2,1fr);
    min-height:auto;
  }
  .portal{
    min-height:54vw;
  }
  /* パネル数が奇数（現在5枚）の場合、あまった最後の1枚を2列ぶん使って表示する */
  .portal:last-child:nth-child(odd){
    grid-column:1 / -1;
  }
  .portal__content{
    left:24px;
    right:22px;
    bottom:28px;
  }
  .portal__title{
    font-size:20px;
  }
}

@media(max-width:767px){
  .hero__copy{
    top:88px;
    left:20px;
    max-width:240px;
  }
  .hero__copy h1{
    font-size:15px;
    line-height:1.85;
  }
  .hero__note{
    right:20px;
    bottom:76px;
    left:auto;
    max-width:230px;
  }
  .hero__note p{
    font-size:9.5px;
    line-height:1.9;
  }
  .portals{
    grid-template-columns:1fr;
  }
  .portal{
    /* 4→5枚構成になったぶん、1枚あたりの高さを詰めてスクロール量を抑える */
    min-height:56svh;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.22);
  }
  .portal:last-child{
    border-bottom:0;
  }
  .portal__num{
    top:22px;
    left:20px;
  }
  .portal__content{
    left:20px;
    right:18px;
    bottom:24px;
  }
  .portal__subtitle{
    font-size:10px;
    margin-bottom:10px;
  }
  .portal__title{
    font-size:18px;
    line-height:1.75;
  }
  .portal__cta{
    margin-top:14px;
    padding:9px 14px;
    font-size:10px;
  }
}



/* Step 11 responsive adjustment */
@media(max-width:767px){
  .global-menu__nav a,
  .global-menu__nav button{
    min-height:48px;
  }
  .portal__click{
    -webkit-tap-highlight-color:transparent;
  }
}



/* Step 12 responsive subpage header */
@media(max-width:767px){
  .simple-page-header{
    height:60px;
    padding:10px 12px;
  }
  .simple-page-main{
    padding-top:92px;
  }
}