<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>宮澤ミシェル 公式サイト</title>
<meta name="description" content="笑顔配達人/サッカー解説者 宮澤ミシェルの公式サイト。サッカーの現場で培った経験をもとに、チームビルディング・人材育成・リーダーシップをテーマとした講演活動を行っています。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho:wght@500;600;700&display=swap">
<style>
/* Layout: 名刺表面のナイトスタジアムで開き、白へ切り替え → 白/オフホワイトを交互に重ね、講演と問い合わせでもう一度ネイビーに戻る(明暗のリズム) */
:root{
color-scheme: light;
--navy:#071C33;
--navy-deep:#041322;
--navy-line:rgba(255,255,255,.14);
--white:#FFFFFF;
--offwhite:#F5F5F2;
--paper-line:#E3E4DF;
--green:#83A947;
--green-deep:#5F7F2E; /* 白背景上の小さな文字用(コントラスト確保) */
--ink:#20252A;
--gray:#7B8085;
--on-dark-soft:rgba(255,255,255,.78);
--font-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
--font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
--font-serif-en:"Cormorant Garamond","Times New Roman",serif;
--wrap:1180px;
--gutter:clamp(20px,5vw,56px);
--section-y:clamp(80px,11vw,150px);
--ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{
margin:0;background:var(--white);color:var(--ink);
font-family:var(--font-sans);font-size:16px;line-height:1.95;letter-spacing:.04em;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
/* ---------- 共通:見出し ---------- */
.eyebrow{
font-family:var(--font-serif-en);font-weight:500;
font-size:.95rem;letter-spacing:.32em;text-transform:uppercase;
color:var(--green-deep);display:flex;align-items:center;gap:14px;margin:0 0 22px;
}
.eyebrow::after{content:"";width:40px;height:1px;background:currentColor;opacity:.7}
.on-dark .eyebrow{color:var(--green)}
.heading{
font-family:var(--font-mincho);font-weight:600;color:var(--navy);
font-size:clamp(1.65rem,3.2vw,2.6rem);line-height:1.6;letter-spacing:.06em;
margin:0;text-wrap:balance;
}
.on-dark .heading{color:var(--white)}
.rule{display:block;width:56px;height:2px;background:var(--green);margin:28px 0}
/* ---------- 写真枠(PHOTO PLACEHOLDER) ----------
実写真が届いたら .ph の div を <img src="images/xxx.jpg" alt="..."> に置き換えるだけで差し替えできます */
.photo{position:relative;overflow:hidden;background:var(--offwhite);max-width:100%}
.photo img{width:100%;height:100%;object-fit:cover}
.ph{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
text-align:center;padding:16px;color:var(--gray);
background:
repeating-linear-gradient(135deg,transparent 0 14px,rgba(7,28,51,.035) 14px 15px),
var(--offwhite);
border:1px solid var(--paper-line);
}
.ph__label{font-family:var(--font-serif-en);letter-spacing:.28em;font-size:.8rem;font-weight:600}
.ph__note{font-size:.78rem;letter-spacing:.06em;line-height:1.6}
.on-dark .ph,.ph--dark{
color:rgba(255,255,255,.55);border-color:var(--navy-line);
background:
repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.04) 14px 15px),
#0B2541;
}
.section--offwhite .ph{background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(7,28,51,.04) 14px 15px),#ECEDE8}
/* ---------- ボタン ---------- */
.btn{
display:inline-flex;align-items:center;gap:18px;
font-family:var(--font-sans);font-weight:500;font-size:.95rem;letter-spacing:.12em;
text-decoration:none;padding:17px 30px 17px 34px;border:1px solid currentColor;
transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn__arrow{width:26px;height:1px;background:currentColor;position:relative;transition:width .4s var(--ease)}
.btn__arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .btn__arrow{width:36px}
.btn--light{color:var(--white);border-color:rgba(255,255,255,.6)}
.btn--light:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn--green{background:var(--green);color:var(--white);border-color:var(--green)}
.btn--green:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn--navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn--navy:hover{background:var(--green);border-color:var(--green)}
/* =========================================================
HEADER / NAV
========================================================= */
.site-header{
position:fixed;left:0;right:0;top:0;z-index:50;
padding-top:env(safe-area-inset-top,0px);
transition:background .5s var(--ease),box-shadow .5s var(--ease);
color:var(--white);
}
.site-header.is-scrolled{background:rgba(4,19,34,.94);box-shadow:0 1px 0 var(--navy-line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;max-width:1360px;margin-inline:auto;padding-inline:var(--gutter)}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1.2}
.logo__en{font-family:var(--font-serif-en);font-weight:600;letter-spacing:.24em;font-size:1.05rem}
.logo__ja{font-family:var(--font-mincho);font-size:.72rem;letter-spacing:.3em;color:var(--on-dark-soft)}
.gnav{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.gnav a{font-family:var(--font-serif-en);font-size:.92rem;letter-spacing:.2em;text-decoration:none;font-weight:500;position:relative;padding-block:6px}
.gnav a:not(.gnav__cta)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.gnav a:not(.gnav__cta):hover::after{transform:scaleX(1)}
.gnav__cta{font-family:var(--font-sans)!important;font-size:.82rem!important;letter-spacing:.1em!important;padding:10px 18px!important;border:1px solid rgba(255,255,255,.55);transition:background .3s,color .3s}
.gnav__cta:hover{background:var(--white);color:var(--navy)}
.menu-btn{display:none;background:none;border:0;color:inherit;width:44px;height:44px;position:relative;cursor:pointer;padding:0}
.menu-btn span{position:absolute;left:10px;right:10px;height:1px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.menu-btn span:nth-child(1){top:17px}.menu-btn span:nth-child(2){top:26px;left:18px}
.menu-open .menu-btn span:nth-child(1){transform:translateY(4.5px) rotate(20deg)}
.menu-open .menu-btn span:nth-child(2){transform:translateY(-4.5px) rotate(-20deg);left:10px}
/* =========================================================
01 HERO(名刺表面の世界観)
========================================================= */
.hero{
position:relative;overflow:hidden;color:var(--white);
min-height:clamp(640px,100svh,960px);
background:
radial-gradient(ellipse 38% 30% at 96% 8%,rgba(170,205,255,.20),transparent 70%),
radial-gradient(ellipse 30% 22% at 70% 2%,rgba(170,205,255,.12),transparent 70%),
linear-gradient(180deg,#0A2747 0%,var(--navy) 45%,var(--navy-deep) 100%);
}
/* 芝のグリーンを足元にうっすら */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,transparent,rgba(64,104,40,.22));pointer-events:none}
.hero__photo{position:absolute;left:0;top:0;bottom:0;width:min(54%,820px)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:28% 12%;will-change:transform}
.hero__photo::after{content:"";position:absolute;inset:0;
background:
linear-gradient(90deg,transparent 55%,var(--navy) 99%),
linear-gradient(180deg,rgba(4,19,34,.35) 0%,transparent 18%,transparent 70%,var(--navy-deep) 100%);}
.hero__inner{
position:relative;z-index:2;max-width:1360px;margin-inline:auto;padding-inline:var(--gutter);
min-height:inherit;display:grid;grid-template-columns:1fr minmax(0,1fr);align-items:center;
padding-block:120px 80px;
}
.hero__content{grid-column:2;min-width:0;max-width:560px}
.hero__en{font-family:var(--font-serif-en);font-weight:600;letter-spacing:.42em;font-size:clamp(.85rem,1.1vw,1rem);color:var(--green);margin:0 0 30px}
.hero__copy{font-family:var(--font-mincho);font-weight:600;font-size:clamp(2.3rem,4.4vw,4rem);line-height:1.5;letter-spacing:.08em;margin:0}
.hero__copy span{display:block}
.hero__rule{display:block;width:72px;height:2px;background:var(--green);margin:36px 0 34px;transform-origin:left;animation:drawX 1.4s .6s var(--ease) both}
.hero__title{font-family:var(--font-mincho);font-size:clamp(.95rem,1.25vw,1.1rem);letter-spacing:.14em;margin:0;color:var(--on-dark-soft)}
.hero__name{font-family:var(--font-mincho);font-weight:600;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:.2em;line-height:1.35;margin:4px 0 0}
.hero__lead{font-size:.95rem;line-height:2.1;color:var(--on-dark-soft);margin:26px 0 38px;max-width:30em}
.hero__scroll{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--font-serif-en);font-size:.72rem;letter-spacing:.3em;color:var(--on-dark-soft);display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__scroll::after{content:"";width:1px;height:44px;background:linear-gradient(var(--green),transparent);animation:scrollLine 2.4s var(--ease) infinite}
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero__content>*{animation:heroIn 1.2s var(--ease) both}
.hero__content>*:nth-child(2){animation-delay:.15s}
.hero__content>*:nth-child(4),.hero__content>*:nth-child(5){animation-delay:.35s}
.hero__content>*:nth-child(6),.hero__content>*:nth-child(7){animation-delay:.5s}
/* =========================================================
02 MESSAGE(白へ切り替え)
========================================================= */
.message{background:var(--white)}
.message__grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(48px,8vw,120px);align-items:start}
.message__head{display:flex;gap:40px}
.message__head .eyebrow{writing-mode:vertical-rl;margin:0;letter-spacing:.4em}
.message__head .eyebrow::after{width:1px;height:40px}
.message__title{writing-mode:vertical-rl;font-size:clamp(1.9rem,2.9vw,2.5rem);line-height:1.9;letter-spacing:.14em;height:14em}
.message__body{max-width:34em;padding-top:12px}
.message__body p{margin:0 0 1.6em}
.message__sign{font-family:var(--font-mincho);font-size:1.15rem;letter-spacing:.2em;color:var(--navy);display:flex;align-items:center;gap:16px;margin-top:40px!important}
.message__sign::before{content:"";width:32px;height:1px;background:var(--green)}
/* =========================================================
03 PROFILE
========================================================= */
.section--offwhite{background:var(--offwhite)}
.profile__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,100px);align-items:center}
.profile__photo{aspect-ratio:4/5}
.profile__photo::before{content:"";position:absolute;left:-1px;bottom:-1px;width:38%;height:2px;background:var(--green);z-index:1}
.profile__title{font-family:var(--font-mincho);color:var(--gray);letter-spacing:.14em;margin:0 0 6px;font-size:.95rem}
.profile__name{font-family:var(--font-mincho);font-weight:600;font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:.2em;color:var(--navy);margin:0;line-height:1.4}
.profile__en{font-family:var(--font-serif-en);font-weight:600;letter-spacing:.34em;color:var(--green-deep);margin:4px 0 0;font-size:1rem}
.profile__text p{margin:0 0 1.1em;font-size:.95rem}
.keywords{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;padding:0;list-style:none}
.keywords li{font-size:.8rem;letter-spacing:.08em;padding:6px 14px;border:1px solid var(--paper-line);background:var(--white);color:var(--navy)}
/* =========================================================
04 HISTORY(名刺裏面のタイムライン)
========================================================= */
.history__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,100px);align-items:start}
.history__head{position:sticky;top:120px}
.history__list{list-style:none;margin:0;padding:0;position:relative}
.history__list::before{content:"";position:absolute;left:calc(6.2em + 26px + 5px);top:14px;bottom:14px;width:1px;background:var(--green);transform-origin:top;transition:transform 2s var(--ease)}
.history__list.is-pending::before{transform:scaleY(0)}
.history__item{display:grid;grid-template-columns:6.2em 11px minmax(0,1fr);gap:0 26px;align-items:baseline;padding-block:18px;border-bottom:1px solid var(--paper-line)}
.history__item:last-child{border-bottom:0}
.history__year{font-family:var(--font-serif-en);font-weight:600;font-size:1.9rem;color:var(--navy);letter-spacing:.06em;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.history__year--ja{font-family:var(--font-mincho);font-size:1.05rem;letter-spacing:.14em}
.history__dot{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px var(--white);position:relative;top:-2px}
.history__dot--open{background:var(--white);border:1.5px solid var(--green)}
.history__text{margin:0;font-size:.98rem;line-height:1.85}
.history__text small{display:block;color:var(--gray);font-size:.85rem;margin-top:6px}
/* =========================================================
05 ACTIVITY
========================================================= */
.activity__head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(48px,6vw,72px)}
.activity__head p{max-width:30em;margin:0;color:var(--gray);font-size:.92rem}
.activity__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(20px,3vw,40px)}
.activity__item{grid-column:span 2;min-width:0}
.activity__item--lg{grid-column:span 3}
.activity__item .photo{aspect-ratio:3/2;margin-bottom:22px}
.activity__item--lg .photo{aspect-ratio:16/10}
.activity__item .photo .ph{transition:transform .8s var(--ease)}
.activity__item:hover .photo .ph,.activity__item:hover .photo img{transform:scale(1.025)}
.activity__item .photo img{transition:transform .8s var(--ease)}
.activity__meta{display:flex;align-items:baseline;gap:16px;margin-bottom:10px}
.activity__num{font-family:var(--font-serif-en);font-style:italic;font-size:1.6rem;color:var(--green-deep);line-height:1}
.activity__name{font-family:var(--font-mincho);font-weight:600;font-size:1.3rem;letter-spacing:.1em;color:var(--navy);margin:0}
.activity__text{margin:0;font-size:.9rem;line-height:1.9;color:var(--ink)}
/* =========================================================
06 SPEAKING(第2のメインビジュアル)
========================================================= */
.speaking{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.speaking__pitch{position:absolute;right:-180px;top:50%;width:720px;height:720px;transform:translateY(-50%);opacity:.09;pointer-events:none}
.speaking__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:center}
.speaking__photo{aspect-ratio:4/3;margin-left:calc(var(--gutter) * -1)}
.speaking__body{min-width:0}
.speaking__heading{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.55}
.speaking__body>p{color:var(--on-dark-soft);font-size:.95rem;margin:0 0 1.2em}
.speaking__points{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--navy-line)}
.speaking__points li{font-family:var(--font-mincho);letter-spacing:.1em;padding:14px 0 14px 22px;border-bottom:1px solid var(--navy-line);position:relative;font-size:1rem}
.speaking__points li::before{content:"";position:absolute;left:2px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--green);transform:translateY(-50%)}
/* =========================================================
07 LECTURE THEME
========================================================= */
.lecture__head{margin-bottom:clamp(40px,5vw,64px)}
.lecture__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--navy)}
.lecture__item{padding:34px clamp(0px,3vw,40px) 36px 0;border-bottom:1px solid var(--paper-line);min-width:0}
.lecture__item:nth-child(even){padding-left:clamp(24px,3vw,40px);border-left:1px solid var(--paper-line)}
.lecture__label{font-family:var(--font-serif-en);letter-spacing:.28em;font-size:.8rem;color:var(--green-deep);font-weight:600;margin:0 0 10px}
.lecture__title{font-family:var(--font-mincho);font-weight:600;color:var(--navy);font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.6;letter-spacing:.06em;margin:0 0 12px;text-wrap:balance}
.lecture__text{margin:0;font-size:.9rem;color:var(--ink)}
.note{font-size:.8rem;color:var(--gray);margin:24px 0 0}
/* =========================================================
08 MEDIA / 09 NEWS(編集用の型)
========================================================= */
.list-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.list-head p{margin:0;color:var(--gray);font-size:.9rem}
.media__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.media__item .photo{aspect-ratio:16/10;margin-bottom:18px}
.media__cat{font-family:var(--font-serif-en);letter-spacing:.22em;font-size:.8rem;font-weight:600;color:var(--green-deep);margin:0 0 6px}
.media__title{font-family:var(--font-mincho);font-weight:600;color:var(--navy);font-size:1.1rem;margin:0 0 4px;letter-spacing:.06em}
.media__sub{font-size:.85rem;color:var(--gray);margin:0}
.news__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.news__item{display:block;text-decoration:none;border-top:1px solid var(--navy);padding-top:22px}
.news__item .photo{aspect-ratio:3/2;margin-bottom:20px}
.news__meta{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.news__date{font-family:var(--font-serif-en);font-size:1rem;letter-spacing:.1em;color:var(--gray);font-variant-numeric:tabular-nums}
.news__cat{font-size:.72rem;letter-spacing:.1em;padding:2px 10px;border:1px solid var(--green);color:var(--green-deep)}
.news__title{font-family:var(--font-mincho);font-weight:600;font-size:1.05rem;color:var(--navy);margin:0;line-height:1.7}
.is-placeholder{color:var(--gray)!important}
.tag-ph{display:inline-block;font-family:var(--font-serif-en);font-size:.7rem;letter-spacing:.2em;color:var(--gray);border:1px dashed #B9BCBF;padding:0 8px;margin-left:8px;vertical-align:middle}
/* =========================================================
10 CONTACT CTA
========================================================= */
.contact-cta{position:relative;overflow:hidden;background:var(--navy-deep);color:var(--white)}
.contact-cta__photo{position:absolute;right:0;top:0;bottom:0;width:min(46%,640px)}
.contact-cta__photo img{width:100%;height:100%;object-fit:cover;object-position:30% 10%}
.contact-cta__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,transparent 40%,var(--navy-deep) 100%),linear-gradient(0deg,rgba(4,19,34,.6),transparent 40%)}
.contact-cta__inner{position:relative;z-index:1;padding-block:clamp(100px,13vw,170px)}
.contact-cta__body{max-width:520px}
.contact-cta__body .heading{font-size:clamp(1.9rem,3.6vw,3rem)}
.contact-cta__body p{color:var(--on-dark-soft);margin:0 0 40px;font-size:.95rem}
/* =========================================================
11 CONTACT
========================================================= */
.contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,80px);align-items:start}
.contact__card{background:var(--white);padding:clamp(28px,4vw,44px);border-top:2px solid var(--green)}
.contact__org{font-family:var(--font-mincho);font-weight:600;font-size:1.35rem;color:var(--navy);letter-spacing:.12em;margin:0 0 20px}
.contact__addr{font-style:normal;font-size:.95rem;line-height:1.9;margin:0 0 26px}
.contact__rows{display:grid;gap:14px;margin:0}
.contact__row{display:grid;grid-template-columns:3.6em minmax(0,1fr);align-items:center;gap:12px;border-top:1px solid var(--paper-line);padding-top:14px}
.contact__row dt{font-family:var(--font-serif-en);letter-spacing:.22em;font-weight:600;font-size:.85rem;color:var(--green-deep)}
.contact__row dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.contact__link{font-family:var(--font-serif-en);font-size:1.45rem;font-weight:600;letter-spacing:.06em;color:var(--navy);text-decoration:none;overflow-wrap:anywhere;font-variant-numeric:lining-nums}
.contact__link:hover{color:var(--green-deep)}
.copy-btn{font:inherit;font-size:.72rem;letter-spacing:.08em;background:none;border:1px solid var(--paper-line);color:var(--gray);padding:3px 10px;cursor:pointer}
.copy-btn:hover{border-color:var(--navy);color:var(--navy)}
.form{display:grid;gap:20px}
.form__row{display:grid;gap:8px}
.form__row--2{grid-template-columns:1fr 1fr;gap:20px}
.form label{font-size:.85rem;font-weight:500;letter-spacing:.08em;color:var(--navy)}
.form label em{font-style:normal;font-size:.7rem;color:var(--white);background:var(--green-deep);padding:1px 6px;margin-left:8px}
.form input,.form select,.form textarea{
font:inherit;font-size:16px;letter-spacing:.03em;color:var(--ink);background:var(--white);
border:1px solid var(--paper-line);padding:13px 14px;border-radius:0;width:100%;min-width:0;
transition:border-color .3s;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--navy)}
.form textarea{min-height:150px;resize:vertical}
.form__status{margin:0;font-size:.85rem;color:var(--green-deep);min-height:1.5em}
.form__notice{font-size:.8rem;color:var(--gray);margin:0;padding:12px 14px;border:1px dashed #C6C8C4;background:var(--white)}
/* ---------- FOOTER ---------- */
.site-footer{background:var(--navy-deep);color:var(--on-dark-soft);padding-block:56px 40px;font-size:.8rem}
.site-footer__inner{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.site-footer .logo__en{color:var(--white)}
.site-footer small{font-family:var(--font-serif-en);letter-spacing:.14em;font-size:.82rem}
/* ---------- スクロール表示(控えめなフェード+上方向スライド) ---------- */
.reveal{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.is-pending{opacity:0;transform:translateY(30px)}
/* =========================================================
TABLET
========================================================= */
@media (max-width:1080px){
.gnav a:not(.gnav__cta){display:none}
.gnav{gap:8px}
.menu-btn{display:block}
.speaking__points{grid-template-columns:1fr}
}
/* =========================================================
SMARTPHONE(PCの縮小ではなく、スマホ専用に再構成)
========================================================= */
@media (max-width:760px){
html{scroll-padding-top:60px}
body{font-size:15px;line-height:1.9}
.site-header__inner{height:60px}
.gnav__cta{display:none}
.logo__en{font-size:.95rem}
/* 全画面メニュー */
.mobile-nav{display:flex!important}
/* HERO:写真を全面に、コピーは下部に集約 */
.hero{min-height:max(620px,min(100svh,860px))}
.hero__photo{width:100%;bottom:auto;height:76%}
.hero__photo img{object-position:34% 0}
.hero__photo::after{background:linear-gradient(180deg,rgba(4,19,34,.45) 0%,transparent 16%,transparent 38%,rgba(7,28,51,.85) 60%,var(--navy-deep) 82%)}
.hero__inner{grid-template-columns:1fr;align-items:end;padding-block:0 64px}
.hero__content{grid-column:1}
.hero__en{margin-bottom:14px;font-size:.78rem;letter-spacing:.34em}
.hero__copy{font-size:clamp(1.85rem,8.2vw,2.4rem);line-height:1.55}
.hero__rule{margin:20px 0 18px;width:48px}
.hero__name{font-size:1.75rem}
.hero__title{font-size:.85rem}
.hero__lead{font-size:.86rem;margin:14px 0 24px;line-height:1.95}
.hero .btn{width:100%;justify-content:space-between}
.hero__scroll{display:none}
/* MESSAGE:縦書き→横書き */
.message__grid{grid-template-columns:1fr;gap:28px}
.message__head{flex-direction:column;gap:0}
.message__head .eyebrow{writing-mode:horizontal-tb;margin-bottom:18px}
.message__head .eyebrow::after{width:40px;height:1px}
.message__title{writing-mode:horizontal-tb;height:auto;font-size:1.6rem;line-height:1.7;letter-spacing:.06em}
.message__body{padding-top:0}
.profile__grid,.history__grid,.contact__grid{grid-template-columns:1fr}
.profile__photo{aspect-ratio:1/1;max-width:420px}
.history__head{position:static}
.history__list::before{left:calc(4.4em + 16px + 5px)}
.history__item{grid-template-columns:4.4em 11px minmax(0,1fr);gap:0 16px}
.history__year{font-size:1.4rem}
.history__year--ja{font-size:.9rem}
.activity__grid{grid-template-columns:1fr;gap:44px}
.activity__item,.activity__item--lg{grid-column:auto}
.activity__item .photo,.activity__item--lg .photo{aspect-ratio:16/10}
.speaking__grid{grid-template-columns:1fr}
.speaking__photo{margin-inline:calc(var(--gutter) * -1);aspect-ratio:16/11}
.speaking__pitch{width:480px;height:480px;right:-220px;top:auto;bottom:-120px;transform:none}
.lecture__list{grid-template-columns:1fr}
.lecture__item,.lecture__item:nth-child(even){padding:26px 0;border-left:0}
.media__grid{grid-template-columns:1fr;gap:28px}
.news__grid{grid-template-columns:1fr;gap:0}
.news__item{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:start;padding-block:18px;border-top:1px solid var(--paper-line)}
.news__item:first-child{border-top-color:var(--navy)}
.news__item .photo{margin-bottom:0;aspect-ratio:1/1}
/* CTA:写真を上、テキストを下に */
.contact-cta__photo{position:relative;width:100%;height:auto;aspect-ratio:4/3.4}
.contact-cta__photo img{object-position:30% 6%}
.contact-cta__photo::after{background:linear-gradient(0deg,var(--navy-deep) 0%,transparent 45%)}
.contact-cta__inner{padding-block:8px 72px;margin-top:-56px}
.contact-cta .btn{width:100%;justify-content:space-between}
.form__row--2{grid-template-columns:1fr}
.contact__link{font-size:1.3rem}
}
/* 全画面メニュー(スマホ・タブレット) */
.mobile-nav{
display:none;position:fixed;inset:0;z-index:40;background:var(--navy-deep);color:var(--white);
flex-direction:column;justify-content:center;padding:80px var(--gutter) 40px;
opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
@media (max-width:1080px){.mobile-nav{display:flex}}
.menu-open .mobile-nav{opacity:1;visibility:visible}
.mobile-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mobile-nav a{text-decoration:none;display:flex;align-items:baseline;gap:18px;padding-block:8px;border-bottom:1px solid var(--navy-line)}
.mobile-nav a .en{font-family:var(--font-serif-en);font-size:1.6rem;letter-spacing:.16em;font-weight:500}
.mobile-nav a .ja{font-size:.78rem;color:var(--on-dark-soft);letter-spacing:.1em}
.mobile-nav .btn{margin-top:32px;justify-content:space-between}
.mobile-nav__tel{margin-top:22px;font-size:.85rem;color:var(--on-dark-soft)}
.mobile-nav__tel a{display:inline;border:0;color:var(--white);font-family:var(--font-serif-en);font-size:1.15rem;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.reveal.is-pending{opacity:1;transform:none}
.history__list.is-pending::before{transform:none}
}
</style>
</head>
<body>
<!-- =========================================================
HEADER
========================================================= -->
<header class="site-header" id="top">
<div class="site-header__inner">
<a class="logo" href="#top" aria-label="宮澤ミシェル 公式サイト トップへ">
<span class="logo__en">MICHEL MIYAZAWA</span>
<span class="logo__ja">宮澤ミシェル</span>
</a>
<nav class="gnav" aria-label="メインメニュー">
<a href="#message">MESSAGE</a>
<a href="#profile">PROFILE</a>
<a href="#activity">ACTIVITY</a>
<a href="#speaking">SPEAKING</a>
<a href="#media">MEDIA</a>
<a href="#news">NEWS</a>
<a class="gnav__cta" href="#contact">講演・出演のご相談</a>
<button class="menu-btn" id="menuBtn" type="button" aria-label="メニューを開く" aria-expanded="false" aria-controls="mobileNav"><span></span><span></span></button>
</nav>
</div>
</header>
<div class="mobile-nav" id="mobileNav" aria-hidden="true">
<ul>
<li><a href="#message"><span class="en">MESSAGE</span><span class="ja">メッセージ</span></a></li>
<li><a href="#profile"><span class="en">PROFILE</span><span class="ja">プロフィール</span></a></li>
<li><a href="#activity"><span class="en">ACTIVITY</span><span class="ja">活動</span></a></li>
<li><a href="#speaking"><span class="en">SPEAKING</span><span class="ja">講演</span></a></li>
<li><a href="#media"><span class="en">MEDIA</span><span class="ja">メディア</span></a></li>
<li><a href="#news"><span class="en">NEWS</span><span class="ja">お知らせ</span></a></li>
<li><a href="#contact"><span class="en">CONTACT</span><span class="ja">お問い合わせ</span></a></li>
</ul>
<a class="btn btn--green" href="#contact">講演・出演のご相談<span class="btn__arrow"></span></a>
<p class="mobile-nav__tel">TEL <a href="tel:05057998376">050-5799-8376</a></p>
</div>
<main>
<!-- =========================================================
01 FIRST VIEW
写真差し替え:下の img の src を変更
========================================================= -->
<section class="hero" aria-label="宮澤ミシェル">
<div class="hero__photo">
<img src="http://www.life-label.com/web/wp-content/uploads/2026/10/hero.jpg" alt="スーツ姿で微笑む宮澤ミシェル" id="heroImg" fetchpriority="high" onerror="this.style.visibility='hidden'">
</div>
<div class="hero__inner">
<div class="hero__content">
<p class="hero__en">MICHEL MIYAZAWA</p>
<p class="hero__copy"><span>人を育てる。</span><span>チームを育てる。</span><span>未来を育てる。</span></p>
<span class="hero__rule" aria-hidden="true"></span>
<p class="hero__title">笑顔配達人 / サッカー解説者</p>
<h1 class="hero__name">宮澤ミシェル</h1>
<p class="hero__lead">選手、指導者、解説者として、長年サッカーと人に向き合ってきた。その経験を、これからの人づくり、チームづくりへ。</p>
<a class="btn btn--light" href="#speaking">講演・出演について<span class="btn__arrow"></span></a>
</div>
</div>
<span class="hero__scroll" aria-hidden="true">SCROLL</span>
</section>
<!-- =========================================================
02 MESSAGE
========================================================= -->
<section class="message section" id="message">
<div class="wrap message__grid">
<div class="message__head">
<p class="eyebrow">MESSAGE</p>
<h2 class="heading message__title">サッカーから学んだのは、<br>人との向き合い方でした。</h2>
</div>
<div class="message__body reveal">
<p>プロサッカー選手としてプレーし、現役を退いてからは指導者として、解説者として、たくさんの選手や監督、チームを見てきました。</p>
<p>そこで何度も感じてきたのは、同じメンバーでも、リーダーの関わり方ひとつでチームは大きく変わるということです。声のかけ方、任せ方、待ち方。その違いが、選手の表情にも、試合の内容にも表れます。</p>
<p>サッカーの現場で学んだこの経験は、会社や学校、地域の組織づくりにもつながっています。人が育ち、チームが育つ。そのきっかけを、ひとつでも多く届けていきたいと思っています。</p>
<p class="message__sign">宮澤ミシェル</p>
</div>
</div>
</section>
<!-- =========================================================
03 PROFILE
写真差し替え:.ph を <img src="images/profile.jpg" alt="宮澤ミシェル"> に置き換え
========================================================= -->
<section class="profile section section--offwhite" id="profile">
<div class="wrap profile__grid">
<figure class="photo profile__photo reveal" style="margin:0">
<div class="ph"><span class="ph__label">PHOTO PLACEHOLDER</span><span class="ph__note">宮澤ミシェル本人の自然な笑顔の写真</span></div>
</figure>
<div class="profile__text reveal">
<p class="eyebrow">PROFILE</p>
<p class="profile__title">笑顔配達人 / サッカー解説者</p>
<h2 class="profile__name">宮澤ミシェル</h2>
<p class="profile__en">MICHEL MIYAZAWA</p>
<span class="rule" aria-hidden="true"></span>
<p>1963年 千葉県生まれ。国士舘大学卒業。<br>1981年、国体史上初の外国籍選手として国体出場。1986年、フジタサッカークラブ入団。1992年、ジェフユナイテッド市原へ移籍。1993年、日本国籍取得。日本代表候補に選出。</p>
<p>現役引退後はサッカー指導者として、帝京高校サッカー部コーチ、PUMAサッカーアカデミー・チーフコーチなどを歴任。</p>
<p>現在はサッカー解説者・指導者として活動し、各種メディアでサッカー解説を務めるほか、チームビルディング、人材育成、リーダーシップなどをテーマとした講演活動を行っています。</p>
<ul class="keywords" aria-label="キーワード">
<li>チームビルディング</li><li>人材育成</li><li>リーダーシップ</li><li>教育・スポーツ指導</li><li>サッカー解説・メディア出演</li>
</ul>
</div>
</div>
</section>
<!-- =========================================================
04 HISTORY
========================================================= -->
<section class="history section" id="history">
<div class="wrap history__grid">
<div class="history__head reveal">
<p class="eyebrow">HISTORY</p>
<h2 class="heading">国籍という壁を越え、<br>サッカーとともに<br>歩んできた人生。</h2>
</div>
<ol class="history__list" id="historyList">
<li class="history__item"><span class="history__year">1963</span><span class="history__dot"></span><p class="history__text">千葉県生まれ。国士舘大学卒業。</p></li>
<li class="history__item"><span class="history__year">1981</span><span class="history__dot"></span><p class="history__text">国体史上初の外国籍選手として国体出場。</p></li>
<li class="history__item"><span class="history__year">1986</span><span class="history__dot"></span><p class="history__text">フジタサッカークラブ入団。</p></li>
<li class="history__item"><span class="history__year">1992</span><span class="history__dot"></span><p class="history__text">ジェフユナイテッド市原へ移籍。</p></li>
<li class="history__item"><span class="history__year">1993</span><span class="history__dot"></span><p class="history__text">日本国籍取得。日本代表候補に選出。</p></li>
<li class="history__item"><span class="history__year history__year--ja">引退後</span><span class="history__dot history__dot--open"></span><p class="history__text">サッカー指導者として、帝京高校サッカー部コーチ、PUMAサッカーアカデミー・チーフコーチなどを歴任。</p></li>
<li class="history__item"><span class="history__year history__year--ja">現在</span><span class="history__dot history__dot--open"></span><p class="history__text">サッカー解説者・指導者として活動。<small>各種メディアでのサッカー解説のほか、チームビルディング・人材育成・リーダーシップをテーマに講演活動を行う。</small></p></li>
</ol>
</div>
</section>
<!-- =========================================================
05 ACTIVITY
写真差し替え:各 .ph を <img src="images/activity-xx.jpg" alt="..."> に置き換え
========================================================= -->
<section class="activity section section--offwhite" id="activity">
<div class="wrap">
<div class="activity__head">
<div>
<p class="eyebrow">ACTIVITY</p>
<h2 class="heading">宮澤ミシェルの活動</h2>
</div>
<p>ピッチの上で、放送席で、そして講演の会場で。サッカーを通して人と向き合う活動を続けています。</p>
</div>
<div class="activity__grid">
<article class="activity__item activity__item--lg reveal">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO PLACEHOLDER</span><span class="ph__note">講演している写真</span></div></div>
<div class="activity__meta"><span class="activity__num">01</span><h3 class="activity__name">講演活動</h3></div>
<p class="activity__text">チームビルディング、人材育成、リーダーシップなどをテーマに講演を行っています。サッカーの現場で見てきた監督と選手の関係から、組織づくりのヒントをお話しします。</p>
</article>
<article class="activity__item activity__item--lg reveal">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO PLACEHOLDER</span><span class="ph__note">解説・放送席での写真</span></div></div>
<div class="activity__meta"><span class="activity__num">02</span><h3 class="activity__name">サッカー解説</h3></div>
<p class="activity__text">各種メディアでサッカー解説を務めています。プレーの裏にある監督の意図や選手の判断を、わかりやすい言葉で伝えます。</p>
</article>
<article class="activity__item reveal">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO PLACEHOLDER</span><span class="ph__note">指導している写真</span></div></div>
<div class="activity__meta"><span class="activity__num">03</span><h3 class="activity__name">サッカー指導</h3></div>
<p class="activity__text">帝京高校サッカー部コーチ、PUMAサッカーアカデミー・チーフコーチなどを歴任。現在も指導者として活動しています。</p>
</article>
<article class="activity__item reveal">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO PLACEHOLDER</span><span class="ph__note">子ども・若い世代との写真</span></div></div>
<div class="activity__meta"><span class="activity__num">04</span><h3 class="activity__name">教育・人材育成</h3></div>
<p class="activity__text">指導の経験をもとに、自分で考えて動く力を育てる関わり方やコミュニケーションを伝えます。</p>
</article>
<article class="activity__item reveal">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO PLACEHOLDER</span><span class="ph__note">テレビ・ラジオ・イベントの写真</span></div></div>
<div class="activity__meta"><span class="activity__num">05</span><h3 class="activity__name">メディア活動</h3></div>
<p class="activity__text">テレビ・ラジオ・イベントなどを通して、サッカーの面白さと、そこにいる人の魅力を届けます。</p>
</article>
</div>
</div>
</section>
<!-- =========================================================
06 SPEAKING
写真差し替え:.ph を <img src="images/speaking.jpg" alt="講演する宮澤ミシェル"> に置き換え
========================================================= -->
<section class="speaking section on-dark" id="speaking">
<!-- ピッチのセンターサークルを模した細線(装飾) -->
<svg class="speaking__pitch" viewBox="0 0 720 720" fill="none" stroke="#FFFFFF" stroke-width="1.5" aria-hidden="true">
<circle cx="360" cy="360" r="200"/><circle cx="360" cy="360" r="5" fill="#FFFFFF"/>
<line x1="360" y1="0" x2="360" y2="720"/>
<rect x="1" y="1" width="718" height="718"/>
</svg>
<div class="wrap speaking__grid">
<figure class="photo speaking__photo reveal" style="margin-block:0">
<div class="ph ph--dark"><span class="ph__label">PHOTO PLACEHOLDER</span><span class="ph__note">講演会場で話す宮澤ミシェルの写真(横位置推奨)</span></div>
</figure>
<div class="speaking__body reveal">
<p class="eyebrow">SPEAKING</p>
<h2 class="heading speaking__heading">サッカーの話から、<br>組織と人の話へ。</h2>
<span class="rule" aria-hidden="true"></span>
<p>宮澤ミシェルの講演は、スポーツの成功談だけを話す講演ではありません。</p>
<p>サッカーの世界で経験してきたことを通して、組織や教育について考えるきっかけをお届けします。</p>
<ul class="speaking__points">
<li>監督と選手の関係</li>
<li>リーダーシップ</li>
<li>チームづくり</li>
<li>人材育成</li>
<li>コミュニケーション</li>
<li>自主性</li>
</ul>
</div>
</div>
</section>
<!-- =========================================================
07 LECTURE THEME
テーマの追加・変更:<li class="lecture__item"> を1つ単位でコピー/削除
========================================================= -->
<section class="lecture section" id="lecture">
<div class="wrap">
<div class="lecture__head reveal">
<p class="eyebrow">LECTURE THEME</p>
<h2 class="heading">主な講演テーマ</h2>
</div>
<ul class="lecture__list">
<li class="lecture__item reveal">
<p class="lecture__label">THEME</p>
<h3 class="lecture__title">歴代日本代表監督に見る<br>チームビルディング</h3>
<p class="lecture__text">監督が替わると、チームの空気や選手の動きはどう変わるのか。サッカーの現場から、組織づくりのヒントを考えます。</p>
</li>
<li class="lecture__item reveal">
<p class="lecture__label">THEME</p>
<h3 class="lecture__title">人が自ら動くチームのつくり方</h3>
<p class="lecture__text">指示を待つのではなく、一人ひとりが考えて動くチームへ。任せ方と声のかけ方についてお話しします。</p>
</li>
<li class="lecture__item reveal">
<p class="lecture__label">THEME</p>
<h3 class="lecture__title">目標を持つこと、<br>挑戦し続けること</h3>
<p class="lecture__text">サッカーとともに歩んできた人生を振り返りながら、目標に向かって挑戦を続けることについてお話しします。</p>
</li>
<li class="lecture__item reveal">
<p class="lecture__label">THEME</p>
<h3 class="lecture__title">子どもの可能性を引き出す<br>指導とコミュニケーション</h3>
<p class="lecture__text">指導者や保護者、教育関係者に向けて、子どもが伸びていく関わり方を指導の経験からお伝えします。</p>
</li>
</ul>
<p class="note">※講演テーマは一例です。内容は今後追加・変更する場合があります。</p>
</div>
</section>
<!-- =========================================================
08 MEDIA(実績確定までの型)
追加方法:<article class="media__item"> をコピーし、写真・カテゴリ・タイトルを書き換え
========================================================= -->
<section class="media section section--offwhite" id="media">
<div class="wrap">
<div class="list-head reveal">
<div>
<p class="eyebrow">MEDIA</p>
<h2 class="heading">メディア・出演</h2>
</div>
<p>サッカー解説、テレビ・ラジオ、イベントなどの出演情報を掲載予定です。</p>
</div>
<div class="media__grid">
<article class="media__item reveal">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO PLACEHOLDER</span></div></div>
<p class="media__cat">TV<span class="tag-ph">PLACEHOLDER</span></p>
<h3 class="media__title is-placeholder">番組名・出演タイトルが入ります</h3>
<p class="media__sub">放送局・出演内容が入ります</p>
</article>
<article class="media__item reveal">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO PLACEHOLDER</span></div></div>
<p class="media__cat">RADIO<span class="tag-ph">PLACEHOLDER</span></p>
<h3 class="media__title is-placeholder">番組名・出演タイトルが入ります</h3>
<p class="media__sub">放送局・出演内容が入ります</p>
</article>
<article class="media__item reveal">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO PLACEHOLDER</span></div></div>
<p class="media__cat">EVENT<span class="tag-ph">PLACEHOLDER</span></p>
<h3 class="media__title is-placeholder">イベント名が入ります</h3>
<p class="media__sub">主催・開催内容が入ります</p>
</article>
</div>
</div>
</section>
<!-- =========================================================
09 NEWS(記事確定までの型)
追加方法:<a class="news__item"> をコピーし、日付・カテゴリ・タイトル・リンク先を書き換え
========================================================= -->
<section class="news section" id="news">
<div class="wrap">
<div class="list-head reveal">
<div>
<p class="eyebrow">NEWS</p>
<h2 class="heading">お知らせ</h2>
</div>
<p>活動報告、講演情報、メディア出演などをお知らせします。</p>
</div>
<div class="news__grid">
<a class="news__item reveal" href="#news">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO</span></div></div>
<div><div class="news__meta"><span class="news__date">YYYY.MM.DD</span><span class="news__cat">カテゴリ</span></div>
<h3 class="news__title is-placeholder">記事タイトルが入ります</h3></div>
</a>
<a class="news__item reveal" href="#news">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO</span></div></div>
<div><div class="news__meta"><span class="news__date">YYYY.MM.DD</span><span class="news__cat">カテゴリ</span></div>
<h3 class="news__title is-placeholder">記事タイトルが入ります</h3></div>
</a>
<a class="news__item reveal" href="#news">
<div class="photo"><div class="ph"><span class="ph__label">PHOTO</span></div></div>
<div><div class="news__meta"><span class="news__date">YYYY.MM.DD</span><span class="news__cat">カテゴリ</span></div>
<h3 class="news__title is-placeholder">記事タイトルが入ります</h3></div>
</a>
</div>
</div>
</section>
<!-- =========================================================
10 CONTACT CTA
写真差し替え:images/cta.jpg を用意し src を変更(現在は hero.jpg を流用)
========================================================= -->
<section class="contact-cta on-dark" aria-labelledby="ctaTitle">
<div class="contact-cta__photo">
<img src="images/hero.jpg" alt="" loading="lazy" width="602" height="976">
</div>
<div class="wrap contact-cta__inner">
<div class="contact-cta__body reveal">
<p class="eyebrow">CONTACT</p>
<h2 class="heading" id="ctaTitle">講演・出演のご相談</h2>
<span class="rule" aria-hidden="true"></span>
<p>企業研修、講演会、学校・教育機関での講演、スポーツイベント、メディア出演などのご相談を受け付ける予定です。</p>
<a class="btn btn--green" href="#contact">お問い合わせはこちら<span class="btn__arrow"></span></a>
</div>
</div>
</section>
<!-- =========================================================
11 CONTACT
========================================================= -->
<section class="contact section section--offwhite" id="contact">
<div class="wrap">
<div class="reveal" style="margin-bottom:clamp(40px,5vw,64px)">
<p class="eyebrow">CONTACT</p>
<h2 class="heading">お問い合わせ</h2>
</div>
<div class="contact__grid">
<div class="contact__card reveal">
<p class="contact__org">宮澤ミシェル事務局</p>
<address class="contact__addr">〒290-0054<br>千葉県市原市五井中央東2-17-18<br>フィットビル</address>
<dl class="contact__rows">
<div class="contact__row">
<dt>TEL</dt>
<dd><a class="contact__link" href="tel:05057998376" id="telText">050-5799-8376</a><button class="copy-btn" type="button" data-copy="050-5799-8376">コピー</button></dd>
</div>
<div class="contact__row">
<dt>MAIL</dt>
<dd><a class="contact__link" href="mailto:michel@housefit.jp" id="mailText">michel@housefit.jp</a><button class="copy-btn" type="button" data-copy="michel@housefit.jp">コピー</button></dd>
</div>
</dl>
</div>
<!-- 問い合わせフォーム:送信先が決まったら form の submit 処理(script 内 handleFormSubmit)を接続してください -->
<form class="form reveal" id="contactForm" novalidate>
<p class="form__notice">お問い合わせフォームは現在準備中です。お急ぎの場合は、お電話またはメールにてご連絡ください。</p>
<div class="form__row form__row--2">
<div class="form__row"><label for="f-name">お名前<em>必須</em></label><input id="f-name" name="name" type="text" autocomplete="name" required></div>
<div class="form__row"><label for="f-org">会社名・団体名</label><input id="f-org" name="organization" type="text" autocomplete="organization"></div>
</div>
<div class="form__row form__row--2">
<div class="form__row"><label for="f-mail">メールアドレス<em>必須</em></label><input id="f-mail" name="email" type="email" autocomplete="email" required></div>
<div class="form__row"><label for="f-tel">電話番号</label><input id="f-tel" name="tel" type="tel" autocomplete="tel"></div>
</div>
<div class="form__row"><label for="f-type">ご相談内容</label>
<select id="f-type" name="type">
<option>講演・企業研修</option>
<option>学校・教育機関での講演</option>
<option>スポーツイベント</option>
<option>メディア出演</option>
<option>その他</option>
</select>
</div>
<div class="form__row"><label for="f-msg">詳細(日程・会場・人数など)</label><textarea id="f-msg" name="message"></textarea></div>
<div><button class="btn btn--navy" type="submit">内容を確認する<span class="btn__arrow"></span></button></div>
<p class="form__status" id="formStatus" role="status"></p>
</form>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap site-footer__inner">
<a class="logo" href="#top"><span class="logo__en">MICHEL MIYAZAWA</span><span class="logo__ja">宮澤ミシェル事務局</span></a>
<small>© 宮澤ミシェル事務局</small>
</div>
</footer>
<script>
(function(){
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var header = document.querySelector('.site-header');
var heroImg = document.getElementById('heroImg');
/* ヘッダー:スクロールで背景を付ける+ヒーロー写真の軽いパララックス */
function onScroll(){
var y = window.scrollY || 0;
header.classList.toggle('is-scrolled', y > 40);
if(!reduce && heroImg && y < window.innerHeight){
heroImg.style.transform = 'translateY(' + (y * 0.12) + 'px)';
}
}
window.addEventListener('scroll', onScroll, {passive:true});
onScroll();
/* スマホメニュー */
var menuBtn = document.getElementById('menuBtn');
var mobileNav = document.getElementById('mobileNav');
function setMenu(open){
document.body.classList.toggle('menu-open', open);
menuBtn.setAttribute('aria-expanded', open);
menuBtn.setAttribute('aria-label', open ? 'メニューを閉じる' : 'メニューを開く');
mobileNav.setAttribute('aria-hidden', !open);
document.body.style.overflow = open ? 'hidden' : '';
}
menuBtn.addEventListener('click', function(){ setMenu(!document.body.classList.contains('menu-open')); });
mobileNav.addEventListener('click', function(e){ if(e.target.closest('a')) setMenu(false); });
document.addEventListener('keydown', function(e){ if(e.key === 'Escape') setMenu(false); });
/* スクロール表示:画面外の要素だけを待機状態にし、見えたら表示 */
if(!reduce && 'IntersectionObserver' in window){
var targets = Array.prototype.slice.call(document.querySelectorAll('.reveal, #historyList'));
var io = new IntersectionObserver(function(entries){
entries.forEach(function(en){
if(en.isIntersecting){ en.target.classList.remove('is-pending'); io.unobserve(en.target); }
});
}, {rootMargin:'0px 0px -8% 0px', threshold:0.08});
targets.forEach(function(el){
if(el.getBoundingClientRect().top > window.innerHeight){
el.classList.add('is-pending');
io.observe(el);
}
});
}
/* 電話・メールのコピー */
document.querySelectorAll('.copy-btn').forEach(function(btn){
btn.addEventListener('click', function(){
var text = btn.getAttribute('data-copy');
function done(){ btn.textContent = 'コピーしました'; setTimeout(function(){ btn.textContent = 'コピー'; }, 1800); }
function fallback(){
var el = btn.previousElementSibling, r = document.createRange();
r.selectNodeContents(el); var s = window.getSelection(); s.removeAllRanges(); s.addRange(r);
btn.textContent = '選択しました';
setTimeout(function(){ btn.textContent = 'コピー'; }, 1800);
}
if(navigator.clipboard && navigator.clipboard.writeText){
navigator.clipboard.writeText(text).then(done, fallback);
} else { fallback(); }
});
});
/* 問い合わせフォーム(送信先未確定のため、送信はしない) */
var form = document.getElementById('contactForm');
var status = document.getElementById('formStatus');
function handleFormSubmit(e){
e.preventDefault();
var name = form.querySelector('#f-name'), mail = form.querySelector('#f-mail');
if(!name.value.trim() || !mail.value.trim()){
status.textContent = 'お名前とメールアドレスを入力してください。';
(name.value.trim() ? mail : name).focus();
return;
}
status.textContent = 'フォームは準備中のため、まだ送信できません。お電話(050-5799-8376)またはメール(michel@housefit.jp)にてご連絡ください。';
}
form.addEventListener('submit', handleFormSubmit);
})();
</script>
</body>
</html>