/* 2026-09-17: four user-supplied visual references, adapted to this site's content. */
:root{--paper:#F4EEDD;--sage-decoration:#A8C5B5}
.botanical{position:absolute;width:190px;height:300px;pointer-events:none;color:var(--primary-light);opacity:.25;left:-68px;top:24px;transform:rotate(16deg)}
.feature-section{position:relative;isolation:isolate;background:var(--primary-dark);padding:88px 0 64px}
.feature-section>.botanical{top:52px;width:240px;height:370px;max-width:100%;overflow:hidden}
.feature-section .container{position:relative}
.feature-section .section-head{margin-bottom:0}
.feature-section .eyebrow{color:#fff;margin-bottom:20px}
.feature-section .eyebrow:before,.feature-section .eyebrow:after{background:var(--primary-light)}
.feature-section h2{color:#fff;font-size:36px;line-height:1.6}
.feature-title-pre{display:block;font-size:24px;margin-bottom:16px}
.feature-title-count{font-size:66px;color:#C3DCCA;vertical-align:baseline;line-height:1.3;margin-right:4px}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:150px 40px;padding-top:176px}
.feature-card{position:relative;background:white;padding:158px 36px 36px;border-radius:6px;min-width:0}
.feature-card:nth-child(2){transform:translateY(64px)}
.feature-number{position:absolute;top:-67px;left:24px;font-size:100px;line-height:1.1;font-weight:700;letter-spacing:.02em;color:var(--sage-decoration);z-index:2}
.organic-photo{margin:0;width:280px;aspect-ratio:1.05;overflow:hidden;border-radius:46% 54% 48% 52% / 47% 50% 50% 53%}
.organic-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.feature-card>.organic-photo{position:absolute;right:16px;top:-148px}
.feature-card:nth-child(2)>.organic-photo{border-radius:52% 48% 55% 45% / 55% 47% 53% 45%}
.feature-card h3{font-size:23px;line-height:1.7;color:var(--text);margin-bottom:20px}
.feature-card p{font-size:17px;line-height:1.9}
.feature-card:last-child{grid-column:1/-1;padding:36px 40px;min-height:320px}
.feature-card:last-child .feature-copy{width:58%;max-width:600px}
.feature-card:last-child .feature-number{position:static;display:block;font-size:72px;margin-bottom:18px;color:var(--primary-dark)}
.feature-card:last-child>.organic-photo{right:32px;top:-40px;width:32%;aspect-ratio:1;border-radius:52% 48% 48% 52% / 48% 57% 43% 52%}
.image-disclaimer{font-size:14px;text-align:right;line-height:1.8;margin:24px 0 0;color:var(--muted)}
.feature-section .image-disclaimer{color:#DFEAE3}
.photo-page-banner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);position:relative;background:var(--paper);max-width:1440px;margin:0 auto 0;padding:16px 0 24px}
.banner-title{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;background:var(--primary-dark);color:white;padding:48px 40px 48px max(40px,calc((100vw - 1080px)/2));margin-top:22px;margin-bottom:-22px;overflow:hidden}
.banner-title>.botanical{z-index:-1;left:-54px;top:6px;width:250px;height:360px;opacity:.27}
.banner-title p{font-size:16px;line-height:1.8;margin-bottom:14px;color:#fff}
.banner-title h1{color:#fff;font-size:36px;line-height:1.6;max-width:9em}
.banner-photo{position:relative;height:360px;margin:0}
.banner-photo img{width:100%;height:100%;object-fit:cover;object-position:center 41%}
.banner-photo figcaption{position:absolute;bottom:12px;right:12px;color:var(--primary-dark);background:rgba(250,249,246,.95);padding:4px 8px;font-size:12px;line-height:1.8}
.page-intro-after-banner{background:var(--paper);padding:64px 0}
.subpage .page-intro-after-banner .container{max-width:880px}
.page-intro-after-banner .lead{margin-top:0!important}
.timeline-section{background:var(--paper);padding-top:80px;padding-bottom:80px}
.photo-timeline{list-style:none;padding:0;margin:56px auto 0;max-width:1000px}
.photo-timeline>li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:32px;padding:0 0 60px 78px;margin:0 0 44px;min-height:260px}
.photo-timeline>li:before{content:"";position:absolute;left:22px;top:60px;bottom:-44px;border-left:1px dashed #84998C}
.photo-timeline>li:last-child{margin-bottom:0;padding-bottom:0;min-height:220px}
.photo-timeline>li:last-child:before{display:none}
.flow-number{position:absolute;left:0;top:0;font-size:40px;font-weight:700;line-height:1.4;letter-spacing:.02em;color:var(--primary-dark)}
.flow-copy{padding-top:4px;min-width:0}
.flow-copy h3{font-size:25px;color:var(--primary-dark);line-height:1.7;margin-bottom:20px}
.flow-copy p{font-size:17px;line-height:1.9}
.photo-timeline .organic-photo{width:230px;aspect-ratio:1;align-self:start}
.photo-timeline li:nth-child(even) .organic-photo{border-radius:53% 47% 48% 52% / 45% 54% 46% 55%}
.flow-contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.flow-contact .btn{font-size:16px;padding:14px 18px;gap:12px;min-height:56px}
.flow-contact .btn-sub{background:transparent}
.faq-section{background:var(--paper);padding-top:80px;padding-bottom:80px}
.faq-section .section-head{margin-bottom:44px}
.faq-section h2{font-size:32px;color:var(--primary-dark)}
.faq{gap:28px}
.faq details{background:#fff;border:0;border-radius:6px;padding:30px 36px 32px}
.faq summary{position:relative;padding:0;align-items:baseline;gap:20px;font-size:20px;color:var(--primary-dark);line-height:1.8}
.faq summary:before{content:"Q.";font-size:40px;font-weight:400;line-height:1.4;flex-shrink:0;color:var(--primary-dark)}
.faq summary:after{font-size:20px;flex-shrink:0;align-self:center}
.faq .a{padding:18px 18px 0 68px;max-width:none;font-size:17px;line-height:2.15;color:var(--text)}
.answer-lines{border-bottom:1px dotted #8E9C93;padding-bottom:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.faq-more{margin-top:32px}
@media(min-width:1441px){.banner-title{padding-left:100px}}
@media(min-width:768px) and (max-width:1023px){
 .feature-grid{gap:130px 28px;padding-top:148px}
 .feature-card{padding:138px 28px 30px}.feature-card>.organic-photo{width:230px;top:-120px;right:12px}
 .feature-number{font-size:76px;left:14px;top:-52px}.feature-card h3{font-size:21px}
 .feature-card:last-child .feature-copy{width:58%}.feature-card:last-child>.organic-photo{right:20px;top:22px}
 .banner-title{padding:32px}.banner-title h1{font-size:30px}.banner-photo{height:300px}
 .photo-timeline>li{grid-template-columns:minmax(0,1fr) 190px;gap:24px;padding-left:64px}
 .photo-timeline .organic-photo{width:190px}.flow-copy h3{font-size:22px}
}
@media(max-width:767px){
 .feature-section{padding:56px 0 40px;overflow:hidden}
 .feature-section>.botanical{width:140px;height:260px;left:-62px;top:40px}
 .feature-title-pre{font-size:19px;margin-bottom:10px}.feature-section h2{font-size:28px}.feature-title-count{font-size:52px}
 .feature-grid{grid-template-columns:1fr;gap:154px;padding-top:136px}
 .feature-card,.feature-card:last-child{grid-column:auto;padding:120px 24px 28px;min-height:0}
 .feature-card:nth-child(2){transform:none}
 .feature-card>.organic-photo,.feature-card:last-child>.organic-photo{width:216px;max-width:70%;aspect-ratio:1.08;right:14px;top:-115px}
 .feature-number,.feature-card:last-child .feature-number{position:absolute;top:-45px;left:18px;font-size:70px;line-height:1.1;color:var(--sage-decoration);margin:0}
 .feature-card h3{font-size:20px;margin-bottom:16px}.feature-card p{font-size:16px;line-height:1.8}.feature-card:last-child .feature-copy{width:auto}
 .image-disclaimer{font-size:12px;text-align:left;margin-top:24px}
 .photo-page-banner{display:flex;flex-direction:column;padding:0 0 20px}
 .banner-title{margin:0;padding:36px 24px;min-height:180px}
 .banner-title p{font-size:14px;margin-bottom:12px}.banner-title h1{font-size:28px;max-width:none}
 .banner-title>.botanical{width:165px;height:245px;left:-46px;top:-12px}
 .banner-photo{height:auto;margin:-16px 20px 0 36px;z-index:1}
 .banner-photo img{height:auto;aspect-ratio:1.7;object-fit:cover;object-position:center 40%}
 .banner-photo figcaption{font-size:10px;right:6px;bottom:6px;padding:3px 6px}
 .page-intro-after-banner{padding:36px 0 48px}
 .timeline-section{padding-top:56px;padding-bottom:56px}
 .photo-timeline{margin-top:36px}
 .photo-timeline>li{grid-template-columns:minmax(0,1fr);padding:0 0 32px 48px;margin:0 0 28px;gap:20px;min-height:0}
 .photo-timeline>li:before{left:15px;top:46px;bottom:-28px}
 .flow-number{font-size:28px;line-height:1.4}.flow-copy{padding:0}
 .flow-copy h3{font-size:20px;margin-bottom:14px}.flow-copy p{font-size:16px;line-height:1.8}
 .photo-timeline .organic-photo{width:200px;max-width:100%;justify-self:end;margin:0 8px 0 0}
 .photo-timeline>li:last-child{min-height:0}
 .flow-contact{flex-direction:column;gap:12px;margin-top:20px}.flow-contact .btn{font-size:16px}
 .faq-section{padding:56px 0}.faq-section h2{font-size:26px}.faq-section .section-head{margin-bottom:32px}
 .faq{gap:24px}.faq details{padding:22px 18px 26px}.faq summary{font-size:18px;gap:10px;align-items:flex-start}
 .faq summary:before{font-size:30px;line-height:1.3}.faq summary:after{font-size:18px;align-self:flex-start}
 .faq .a{padding:16px 0 0 0;font-size:16px;line-height:2.1}.answer-lines{padding-bottom:5px}
}
@media(max-width:359px){
 .feature-card,.feature-card:last-child{padding:110px 20px 24px}.feature-number,.feature-card:last-child .feature-number{font-size:60px;left:14px;top:-38px}
 .feature-card>.organic-photo,.feature-card:last-child>.organic-photo{width:188px;top:-108px;right:8px}
 .photo-timeline>li{padding-left:40px}.photo-timeline .organic-photo{width:180px;margin-right:0}.flow-copy h3{font-size:18px}
}

/* ==========================================================
   2026-09-22 修正に伴うレイアウト調整
   ========================================================== */

/* お悩みが3項目になったので1列で大きく見せる */
.wgrid.wgrid-single{
  grid-template-columns:1fr;
  max-width:46rem;
  margin-inline:auto;
}
.wgrid.wgrid-single li{ font-size:17px; }
@media (min-width:1024px){ .wgrid.wgrid-single li{ font-size:18px; } }

/* 対応時間：曜日7列 → 2行のシンプル表 */
.hours.hours-simple{ width:100%; border-collapse:collapse; }
.hours.hours-simple th[scope="row"]{
  text-align:left; white-space:nowrap; width:44%;
  background:transparent; font-weight:700;
}
.hours.hours-simple td{ font-size:19px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
@media (min-width:768px){ .hours.hours-simple td{ font-size:22px; } }

/* お客様の声：2つの声を並べる */
.voice-quotes{
  list-style:none; margin:0 auto; padding:0;
  display:flex; flex-direction:column; gap:12px;
  max-width:34rem;
}
.voice-quotes li{
  background:#FFFFFF; border:1px solid var(--border,#DFE6E0);
  border-radius:6px; padding:18px 20px; text-align:center;
  font-size:19px; font-weight:700; color:var(--primary-dark,#3C5A4E);
  line-height:1.6;
}
@media (min-width:768px){
  .voice-quotes{ flex-direction:row; max-width:44rem; }
  .voice-quotes li{ flex:1; font-size:20px; }
}

/* 濃いグリーン面：カードが1枚になったので幅を抑える */
.section.dark .dark-card{ max-width:40rem; margin-inline:auto; }

/* 固定バー：電話を外してLINEのみになったので全幅 */
.fixed-cta a.l{ flex:1; }

/* 準備中のフォーム（送信できないことを見た目でも伝える） */
.form.form-pending{
  position:relative;
  padding:20px;
  border:1px dashed var(--border,#DFE6E0);
  border-radius:6px;
  background:#FBFCFB;
}
.form.form-pending::before{
  content:"準備中";
  position:absolute; top:-12px; left:16px;
  background:var(--text-tertiary,#8A968F); color:#FFFFFF;
  font-size:14px; font-weight:700; letter-spacing:.06em;
  padding:2px 12px; border-radius:999px;
}
.form.form-pending input,.form.form-pending textarea{ background:#F7F9F8; }

/* ==========================================================
   2026-09-23  ロゴ差し替え・背景素材・レイアウト最適化
   （2026-09-23 改訂：ロゴ拡大／背景をはっきり見せる）
   ========================================================== */

/* ---------- 1. ヘッダーロゴ（画像版） ---------- */
.logo{
  flex-direction:column; align-items:flex-start;
  gap:6px; white-space:normal; line-height:1.4;
}
.logo-tag{
  font-size:13px; font-weight:400; letter-spacing:.08em;
  line-height:1.6; color:var(--primary-dark);
}
.logo-img{ width:250px; height:auto; display:block; }
.header-in{ align-items:flex-end; padding-top:20px; padding-bottom:16px; }

/* ---------- 2. 背景素材 ----------
   文字が乗る面には必ずベールを重ね、WCAG AA（4.5:1）を満たす濃さに調整。 */
.hero{ position:relative; isolation:isolate; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom,
      rgba(250,249,246,.60) 0%, rgba(250,249,246,.64) 55%,
      rgba(250,249,246,.78) 88%, var(--bg) 100%),
    url("bg-soft.jpg") center/cover no-repeat;
}
.section.dark{ position:relative; isolation:isolate; background-color:var(--primary-dark); }
.section.dark::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(60,90,78,.78), rgba(60,90,78,.82)),
    url("bg-deep.jpg") center/cover no-repeat;
}
.cta-block{ position:relative; isolation:isolate; background-color:var(--bg); }
.cta-block::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom,
      rgba(250,249,246,.62) 0%, rgba(250,249,246,.66) 65%, rgba(250,249,246,.84) 100%),
    url("bg-leaf.jpg") center top/cover no-repeat;
}
.footer{ position:relative; isolation:isolate; background-color:var(--primary-pale); }
.footer::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(238,243,239,.74), rgba(238,243,239,.80)),
    url("bg-fresh.jpg") center/cover no-repeat;
}
/* 下層ページ冒頭の帯にも背景を（サブページでも素材が見えるように） */
.page-intro-after-banner{ position:relative; isolation:isolate; background-color:var(--paper); }
.page-intro-after-banner::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(244,238,221,.76), rgba(244,238,221,.82)),
    url("bg-fresh.jpg") center 30%/cover no-repeat;
}
/* 背景の上に乗る文字は一段濃くしてコントラストを確保 */
.cta-block p, .cta-block .btn-note{ color:var(--text); }
.footer .copy{ color:var(--primary-dark); }
.page-intro-after-banner p{ color:var(--text); }

/* ---------- 3. 対応エリア：カードが1枚なので中央1カラムに ---------- */
.onecol{
  display:grid; grid-template-columns:minmax(0,1fr);
  max-width:38rem; margin-inline:auto;
}

/* ---------- 4.「私たちの想い」：本文が長くなったので左右のバランスを調整 ---------- */
.concept{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:56px; }
.concept .body{ max-width:41rem; }
.concept .body .lead{
  font-size:19px; font-weight:700; line-height:1.9;
  color:var(--primary-dark);
  padding-bottom:22px; margin-bottom:26px;
  border-bottom:1px solid var(--border);
}
@media(min-width:768px){
  .concept-heading{ position:sticky; top:32px; }
}

/* ---------- 5. 箇条書きの読み幅を整える ---------- */
.worries{ max-width:44rem; margin-inline:auto; }
.can{ max-width:46rem; margin-inline:auto; }
.worries + .box-note{ max-width:44rem; margin-inline:auto; }

/* ---------- 6. スマホ調整 ---------- */
@media(max-width:767px){
  .logo{ gap:4px; }
  .logo-tag{ font-size:11px; letter-spacing:.02em; }
  .logo-img{ width:190px; }
  .header-in{ align-items:center; padding-top:16px; padding-bottom:16px; }
  .concept{ grid-template-columns:1fr; }
  .concept .body .lead{ font-size:17px; padding-bottom:18px; margin-bottom:20px; }
}
@media(max-width:359px){
  .logo-img{ width:158px; }
  .logo-tag{ font-size:10px; }
}

/* ---------- 7. 極端に狭い端末（320px）で対応時間の表がはみ出していたのを修正 ---------- */
.hours.hours-simple{ min-width:0; }
@media(max-width:359px){
  .hours.hours-simple th[scope="row"]{ width:auto; font-size:13px; padding-left:0; }
  .hours.hours-simple td{ font-size:17px; }
  .hours.hours-simple th,.hours.hours-simple td{ padding-left:2px; padding-right:2px; }
}

/* ---------- 8. 本人写真（プロフィール枠のイラストを実写に差し替え） ---------- */
.portrait{
  margin:0; align-self:stretch;
  border-radius:6px; overflow:hidden;
  background:var(--primary-pale);
}
.portrait img{
  width:100%; height:100%; min-height:280px;
  object-fit:cover; object-position:center 18%;
}
@media(max-width:767px){
  .portrait{ max-width:300px; width:100%; margin-inline:auto; }
  .portrait img{ min-height:0; aspect-ratio:5/6; }
}

/* ---------- 9. 実写に差し替えたことによる調整 ---------- */
.hero-visual img{ object-position:52% 44%; }
.banner-photo img{ object-position:center 44%; }

/* ---------- 10. ヒーローの文字をヘッダーのロゴと左端を揃える ----------
   ヘッダーは最大1280px、ヒーローは最大1440pxのため、
   画面が1440pxを超えると文字だけが左に80pxずれていた。
   ヘッダー基準の左端に合わせて内側に寄せる。 */
.hero > .hero-in{
  padding-left: clamp(0px, calc((100vw - 1280px) / 2), 80px);
}

/* ==========================================================
   2026-09-23 追補：お声の移設・お悩みの写真・FAQの面替え
   ========================================================== */

/* ---------- 11.「私について」に移したお客様のお声 ---------- */
.voice-note{
  margin-top:20px; padding:20px 24px;
  background:var(--primary-pale);
  border-left:3px solid var(--primary);
  border-radius:0 6px 6px 0;
}
.voice-note p{ margin-bottom:8px; }
.voice-note p:last-child{ margin-bottom:0; }
.voice-note b{ color:var(--primary-dark); white-space:nowrap; }

/* ---------- 12. お悩みセクション：写真＋リストの2カラム ---------- */
.worry-layout{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:48px; align-items:center;
}
.worry-photo{ margin:0; border-radius:6px 6px 6px 56px; overflow:hidden; }
.worry-photo img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:58% 50%; }
.worry-body .wgrid.wgrid-single{ max-width:none; margin-inline:0; }
.worry-cta{ margin:24px 0 0; text-align:center; }
@media(max-width:1100px){ .worry-layout{ gap:32px; } }
@media(max-width:767px){
  .worry-layout{ grid-template-columns:1fr; gap:28px; }
  .worry-photo{ border-radius:6px 6px 6px 40px; }
  .worry-photo img{ aspect-ratio:3/2; }
  .worry-cta{ margin-top:20px; }
}

/* ---------- 13. よくあるご質問：前のセクションと面を変える ----------
   トップでは「ご利用の流れ」と同じ紙色で境目が分からなかったため、
   淡いグリーン＋若葉のテクスチャに変更し、上端に区切り線を入れる。 */
.faq-section{
  position:relative; isolation:isolate;
  background-color:#E8EFE9;
  border-top:1px solid #D3E0D7;
}
.faq-section::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(232,239,233,.84), rgba(232,239,233,.90)),
    url("bg-fresh.jpg") center/cover no-repeat;
}

/* ---------- 14. 下層ページの冒頭（プロフィール等）に背景素材 ---------- */
.page-intro:not(.page-intro-after-banner){
  position:relative; isolation:isolate;
  background-color:var(--primary-pale);
}
.page-intro:not(.page-intro-after-banner)::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(238,243,239,.76), rgba(238,243,239,.84)),
    url("bg-soft.jpg") center 35%/cover no-repeat;
}
.page-intro:not(.page-intro-after-banner) p{ color:var(--text); }

/* ---------- 15. 初回訪問で何をするか（3行に集約） ---------- */
.first-visit{ max-width:46rem; margin-inline:auto; }
.first-visit .small{ margin-top:16px; color:var(--muted); }

/* ---------- 16.「私たちの想い」冒頭の問いかけブロック ---------- */
.concept-lead{
  padding-bottom:22px; margin-bottom:26px;
  border-bottom:1px solid var(--border);
}
.concept-lead p{ color:var(--text); }
.concept-lead .q{
  font-size:19px; font-weight:700; line-height:1.8;
  color:var(--primary-dark); margin-bottom:14px;
}
@media(max-width:767px){ .concept-lead .q{ font-size:17px; } }

/* ---------- 17. プロフィール「想い」の3つの声 ---------- */
.wish{
  padding:16px 22px; margin:20px 0;
  background:var(--primary-pale);
  border-left:3px solid var(--primary);
  border-radius:0 6px 6px 0;
  line-height:2;
}
.wish strong{ color:var(--primary-dark); }

/* ---------- 18. ヘッダー：営業時間が3区分になったので折り返しを制御 ---------- */
.header-contact p{ white-space:nowrap; }
@media(max-width:1240px){ .header-contact p{ display:none; } }

/* ---------- 19. お問い合わせフォーム（送信機能つき） ---------- */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-privacy{ margin:0; }
.form-status.is-error{ background:#FBEDEA; color:var(--caution); }
.form-done{ max-width:720px; margin:auto; }
.form-done h3{ color:var(--primary-dark); }
.form-done:focus{ outline:none; }
.form button[disabled]{ opacity:.6; cursor:wait; }

/* ---------- 20. hidden属性を確実に効かせる ----------
   .form{display:flex} がブラウザ標準の [hidden]{display:none} より優先されてしまい、
   送信完了後もフォームが消えなかったため。 */
[hidden]{ display:none !important; }

/* 21. hero: 経歴の1行（ご自宅へ〜とは常に改行） */
.hero-cred{ display:block; }
@media (max-width:767px){
  .hero .hero-pre br{ display:inline; }   /* 「痛みや動かしにくさは／ありませんか？」で改行 */
}
@media (max-width:359px){
  .hero h1{ font-size:24px; }             /* 「『やりたいこと』まで。」を1行に収める */
}

/* 22. 私について：お客様の声は1行ずつ並べる（長いお声でも折り返せるように） */
.voice-note b{ display:block; white-space:normal; margin:4px 0 4px -0.5em; }

/* 23. 私について：写真は本文の高さに引き伸ばさず、元の縦横比（5:6）で上にそろえる */
@media(min-width:768px){
  .profile{ grid-template-columns:280px 1fr; align-items:start; }
  .portrait{ align-self:start; }
  .portrait img{ height:auto; min-height:0; aspect-ratio:5/6; }
}