:root{
  --base:#FFFBF7;      /* Base ミルク */
  --white:#FCFCFC;     /* White ホワイト */
  --pink:#E79DA2;      /* Pink ピンク */
  --lime:#CCD289;      /* Lime ライム */
  --mauve:#D1919E;     /* Mauve モーブ */
  --text:#37383C;      /* Text チャコール */
  --sub:#5E6066;
  --line:#EFE6E2;
  --lime-text:#9AA14E; /* ライムの見出し（白地で読める濃さ） */
  --en:"Short Stack",cursive;
  --ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic UI",Meiryo,sans-serif;
  --maru:"Zen Maru Gothic",sans-serif;
  --wrap:min(1040px,100% - 40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--base);color:var(--text);font-family:var(--ja);font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:var(--wrap);margin-inline:auto}
section{position:relative;isolation:isolate}
/* ふんわりした色のにじみ */
.blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
.blob.pink{background:#F6D3D3}.blob.lime{background:#EEF2C8}.blob.peach{background:#F8E3D3}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:50px;font-family:var(--maru);font-weight:700;letter-spacing:.06em;transition:transform .2s,box-shadow .2s,background .2s}
.btn-pink{background:var(--pink);color:#fff;padding:10px 26px;font-size:14px}
.btn-pink:hover{background:var(--mauve)}
.btn-lime{background:var(--lime);color:#fff;padding:14px 34px;font-size:15px;box-shadow:0 4px 0 rgba(154,161,78,.35)}
.btn-lime:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(154,161,78,.35)}
.btn-line{border:1.5px solid var(--lime);color:var(--lime-text);padding:11px 30px;font-size:14px;background:var(--white)}
.btn-line:hover{background:var(--lime);color:#fff}

/* ヘッダー */
.header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--white) 88%,transparent);backdrop-filter:blur(10px)}
.header .in{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(20px,3.5vw,48px)}
.logo{font-family:var(--en);font-size:24px;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:30px;font-family:var(--maru);font-weight:700;font-size:14px}
.nav a:not(.btn):hover{color:var(--pink)}
.menu-btn{display:none}

/* 見出し */
.sec-en{display:flex;align-items:center;gap:28px;font-family:var(--en);font-size:clamp(30px,3.4vw,42px);line-height:1}
.sec-en::before{content:"";width:34px;height:4px;background:var(--text);border-radius:2px}
.sec-ja{text-align:center;font-family:var(--ja);font-weight:700;color:var(--lime-text);font-size:24px;letter-spacing:.06em;margin-top:44px}
.sec-ja .en{font-family:var(--en);font-weight:400}

/* FV（ここだけ Zen Maru Gothic） */
.fv{padding:clamp(60px,9vw,120px) 0 clamp(80px,10vw,130px);font-family:var(--maru);overflow:hidden}
.fv .wrap{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.fv h1{font-weight:700;letter-spacing:.14em;line-height:1.5}
.fv .l1{display:flex;align-items:center;gap:6px;font-size:clamp(34px,4.2vw,52px)}
.fv .heart{position:relative;display:block;width:clamp(130px,14.5vw,210px);min-width:clamp(130px,14.5vw,210px);flex:none;margin-left:clamp(-60px,-4vw,-18px);margin-right:8px}
.fv .heart img{width:100%}
.fv .heart span{position:absolute;inset:0 0 16% 0;display:grid;place-items:center;color:#fff;font-size:clamp(44px,5vw,64px);letter-spacing:0}
.fv .l2{display:block;font-size:clamp(34px,4.2vw,52px);margin-top:8px}
.fv .l2 b{font-size:1.2em}
.fv .sub{margin-top:clamp(24px,3vw,40px);font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:.14em}
.fv .sub small{font-size:.65em}
.fv .tag{display:flex;align-items:center;gap:30px;margin-top:18px;font-family:var(--en);font-size:14px;color:var(--pink);letter-spacing:.1em}
.fv .tag::before{content:"";width:80px;height:1px;background:var(--pink)}
.fv .laptop{width:min(100%,520px);justify-self:end}

/* コンセプト */
.concept{padding:clamp(70px,8vw,110px) 0 clamp(60px,7vw,90px)}
.concept .copy{text-align:center;font-family:var(--ja);font-weight:700;color:var(--lime-text);font-size:24px;letter-spacing:.2em;margin-top:52px}
.concept .card{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;background:rgba(255,255,255,.7);border-radius:16px;padding:20px 60px;margin-top:40px}
.concept .card img{width:min(340px,100%)}
.concept .card p{font-size:16px;line-height:2.3;letter-spacing:.12em}
.concept .card b{font-size:1.25em;letter-spacing:.14em}

/* 共感・できること */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.worry .item{background:rgba(255,255,255,.75);border-radius:14px;padding:40px 24px 44px;text-align:center}
.worry h3{font-size:15px;font-weight:500;letter-spacing:.06em}
.worry h3 b{font-size:1.15em;font-weight:700}
.worry img{width:180px;margin:36px auto 0}
.can{padding-bottom:clamp(80px,9vw,120px)}
.can .item{background:rgba(255,255,255,.75);border-radius:14px;padding:26px 28px 32px}
.can .head{display:flex;align-items:center;gap:24px}
.can .head img{width:64px}
.can h3{font-size:18px;font-weight:700;letter-spacing:.06em;flex:1;text-align:center}
.can p{margin-top:26px;font-size:15px;line-height:1.95}
.mark{background:linear-gradient(transparent 62%,rgba(204,210,137,.45) 62%)}

/* 作品紹介 */
.works{padding:clamp(80px,9vw,120px) 0}
.works .item{display:block}
.works .ph{display:block;position:relative;border-radius:6px;overflow:hidden;background:#F1EEEA}
.works .ph img{width:100%;aspect-ratio:296/300;object-fit:cover;transition:transform .5s}
.works .ph:hover img{transform:scale(1.04)}
.works .more{position:absolute;right:0;bottom:0;background:var(--white);border-radius:10px 0 0 0;padding:6px 18px;font-size:12px;font-weight:500}
.works .more i{font-style:normal;color:var(--pink);margin-left:6px}
.works .tags{margin-top:18px;font-size:12px;color:var(--sub);word-spacing:.6em}
.works h3{margin-top:10px;font-size:16px;font-weight:700;letter-spacing:.06em}
.works .what{margin-top:14px;font-size:14px;color:var(--sub)}
.works .url{display:inline-block;margin-top:10px;font-size:13px;color:var(--pink);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.works .url i{font-style:normal;margin-left:4px;text-decoration:none;display:inline-block}
.works .url:hover{opacity:.7}
.works .all{text-align:center;margin-top:56px}

/* お客様の声 */
.voices{padding:clamp(80px,9vw,120px) 0}
.voice-list{display:flex;flex-direction:column;gap:52px;margin-top:56px}
.voice{display:flex;align-items:center;gap:20px}
.voice.rev{flex-direction:row-reverse}
.voice .bubble{flex:1;border:2px solid var(--pink);border-radius:12px;background:var(--white);padding:24px 28px;font-size:15px;line-height:2;color:var(--sub)}
.voice .bubble b{color:var(--text);font-size:1.08em}
.voice figure{flex:none;width:100px;text-align:center}
.voice figure img{width:84px;height:100px;margin-inline:auto;object-fit:contain;background:var(--white);border-radius:36px}
.voice figcaption{font-size:12px;margin-top:4px}

/* 自己紹介 */
.profile{padding:clamp(80px,9vw,120px) 0}
.profile .box{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start;margin-top:56px;padding-inline:clamp(0px,2.5vw,32px)}
.profile .box img{border-radius:10px;aspect-ratio:1}
.profile h3{font-size:30px;font-weight:700;letter-spacing:.1em;margin-top:8px}
.profile p{margin-top:34px;font-size:15px;line-height:1.75;letter-spacing:.06em}
.profile .btn{margin-top:34px}

/* 料金 */
.price{padding:clamp(80px,9vw,120px) 0 clamp(60px,7vw,90px)}
.price .ttl{text-align:center;font-size:30px;font-weight:700;letter-spacing:.06em;margin-top:44px}
.price .lead{text-align:center;font-size:14px;margin-top:22px;color:var(--sub)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;align-items:stretch;background:rgba(255,255,255,.6);border-radius:10px}
.plan{padding:28px 28px 34px;text-align:center}
.plan.rec{border:5px solid var(--pink);background:var(--base)}
.plan img{width:150px;margin-inline:auto}
.plan h3{font-size:19px;font-weight:700;letter-spacing:.1em;margin-top:12px}
.plan .yen{font-family:var(--ja);font-size:32px;font-weight:400;margin-top:20px;letter-spacing:.02em}
.plan .yen b{font-weight:700;font-size:.85em}
.plan .lbl{background:var(--pink);color:#fff;font-weight:700;letter-spacing:.14em;font-size:16px;padding:2px 8px;margin-top:10px}
.plan ul{list-style:none;text-align:left;margin-top:18px;display:flex;flex-direction:column;gap:12px;font-size:14px}
.plan li{display:flex;align-items:center;gap:8px}
.plan li::before{content:"";flex:none;width:19px;height:19px;border:1.5px solid var(--pink);border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23E79DA2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.notes{font-size:12px;color:var(--sub);margin-top:30px;line-height:1.7}
.support{background:var(--lime);border-radius:12px;padding:26px 28px;margin-top:28px;color:var(--text)}
.support h3{font-size:18px;font-weight:700;letter-spacing:.06em}
.support h3 span{font-weight:700;margin-left:14px}
.support p{font-size:14px;margin-top:10px}

/* お問い合わせ */
.contact{padding:clamp(90px,10vw,140px) 0 clamp(70px,8vw,90px);text-align:center;overflow:hidden}
.contact .big{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:clamp(56px,10vw,104px);letter-spacing:.12em;color:transparent;-webkit-text-stroke:2.5px var(--pink);line-height:1}
.contact h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:.06em;margin-top:44px}
.contact .txt{margin-top:28px;font-size:15px;line-height:3.6;color:var(--sub)}
.contact .btn-pink{margin-top:26px;padding:14px 32px;font-size:15px}
.contact .free{margin-top:36px;font-size:12px;letter-spacing:.5em;color:var(--sub)}
.contact .free b{font-size:22px;letter-spacing:.5em;margin-left:1.4em}

footer{background:var(--pink);color:var(--white);text-align:center;font-family:var(--en);font-size:13px;padding:24px 16px}

/* ふわっと表示 */
.fade{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* スマホ */
@media (max-width:768px){
  body{font-size:15px}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;background:var(--white);padding:8px 0 20px;box-shadow:0 10px 20px rgba(55,56,60,.08);transform:translateY(-130%);transition:transform .3s}
  .nav.open{transform:none}
  .nav a:not(.btn){width:100%;text-align:center;padding:14px}
  .nav .btn{margin-top:10px}
  .menu-btn{display:grid;place-items:center;width:42px;height:42px;border:none;background:none;cursor:pointer}
  .menu-btn span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;box-shadow:0 7px 0 var(--text),0 -7px 0 var(--text)}
  .fv .wrap{grid-template-columns:1fr;gap:28px}
  .fv .heart{margin-left:-18px}
  .fv .laptop{justify-self:center;width:92%}
  .sec-en{gap:16px}
  .sec-en::before{width:22px;height:3px}
  .sec-ja,.concept .copy{font-size:20px;margin-top:32px}
  .concept .card{grid-template-columns:1fr;gap:20px;padding:24px 20px;text-align:left}
  .concept .card img{margin-inline:auto;width:min(280px,90%)}
  .concept .card p{font-size:14px;letter-spacing:.06em;line-height:2.2}
  .cards3{grid-template-columns:1fr;gap:18px;margin-top:30px}
  .worry .item{padding:28px 20px 30px}
  .worry img{width:150px;margin-top:20px}
  .works .cards3{gap:40px}
  .voice,.voice.rev{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .voice figure{align-self:flex-end}
  .voice.rev figure{align-self:flex-start}
  .voice .bubble{padding:18px 18px;font-size:14px}
  .profile .box{grid-template-columns:1fr;gap:24px}
  .profile .box img{width:min(300px,100%);margin-inline:auto}
  .profile h3{text-align:center}
  .profile p{margin-top:18px;font-size:14px}
  .profile .btn{display:flex;width:fit-content;margin-inline:auto}
  .plans{grid-template-columns:1fr;gap:16px;background:none}
  .plan{background:rgba(255,255,255,.7);border-radius:10px}
  .plan.rec{order:-1}
  .contact .txt{line-height:2.4}
  .contact .free b{display:block;margin:6px 0 0}
}

/* ポワポワ（ピンクと黄緑を重ねて全体に散らす） */
body{position:relative}
main{position:relative;z-index:1}
.bokeh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pair{position:absolute;width:var(--s);height:var(--s)}
.pair i{position:absolute;width:100%;height:100%;border-radius:50%;filter:blur(36px);opacity:.25}
.pair i.pink{background:#FFB9C0}
.pair i.lime{background:#E4F08A}
.pair i:first-child{left:0;top:0}
.pair i:last-child{left:42%;top:34%;width:78%;height:78%}
@media (max-width:768px){.pair{width:calc(var(--s) * .6);height:calc(var(--s) * .6)}.pair i{filter:blur(26px)}}
/* スマホ：親指の位置に出るお問い合わせボタン */
.float-cta{display:none}
@media (max-width:768px){
  .float-cta{display:flex;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;padding:15px 20px;font-size:15px;box-shadow:0 6px 18px rgba(231,157,162,.4);opacity:0;transform:translateY(130%);pointer-events:none;transition:opacity .3s,transform .3s,background .2s}
  .float-cta.show{opacity:1;transform:none;pointer-events:auto}
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ===== 作品詳細ページ ===== */
.crumb{font-size:12px;color:var(--sub);padding-top:28px;letter-spacing:.04em}
.crumb a{text-decoration:underline;text-underline-offset:3px}
.crumb a:hover{color:var(--pink)}
.crumb span{margin:0 .7em;color:var(--pink)}
.d-hero{padding:clamp(40px,6vw,70px) 0 0}
.d-hero .tags{font-size:12px;color:var(--sub);word-spacing:.6em}
.d-hero h1{font-family:var(--maru);font-weight:700;font-size:clamp(24px,3.2vw,36px);letter-spacing:.06em;line-height:1.5;margin-top:12px}
.d-hero .catch{margin-top:18px;font-family:var(--maru);font-weight:700;color:var(--pink);font-size:clamp(16px,1.8vw,20px);letter-spacing:.06em;line-height:1.7}
.d-hero .main{max-width:760px;margin:clamp(48px,6vw,80px) auto 0}
.d-hero .main figure{border-radius:12px;overflow:hidden;background:#F1EEEA}
.d-hero .main img{width:100%}
.d-hero .main.two{max-width:none;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px)}
.d-sec{padding:clamp(100px,11vw,150px) 0 0}
.d-sec .body{margin-top:36px;font-size:15px;line-height:2.3;letter-spacing:.04em}
.d-sec .body p+p{margin-top:1.2em}
.points{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px;counter-reset:pt}
.points>li{background:rgba(252,252,252,.85);border-radius:12px;padding:28px 28px 30px;box-shadow:0 6px 18px rgba(231,157,162,.08);counter-increment:pt}
.points h3{display:flex;align-items:baseline;gap:12px;font-family:var(--maru);font-weight:700;font-size:17px;letter-spacing:.05em;line-height:1.6}
.points h3::before{content:counter(pt,decimal-leading-zero);font-family:var(--en);font-weight:400;color:var(--pink);font-size:22px;line-height:1}
.points p{margin-top:12px;font-size:14px;line-height:2.1;color:var(--sub)}
.points ul{margin:10px 0 0 1.2em;font-size:14px;line-height:2;color:var(--sub)}
.points .mark{color:var(--text);font-weight:700;background:linear-gradient(transparent 62%,#F6D3D3 62%)}
.gallery{display:grid;gap:24px;max-width:760px;margin:40px auto 0}
.gallery.two{grid-template-columns:repeat(2,1fr)}
.gallery figure{border-radius:12px;overflow:hidden;background:#F1EEEA}
.gallery figcaption{background:var(--white);font-size:13px;color:var(--sub);text-align:center;padding:10px}
.info{margin-top:40px;background:rgba(252,252,252,.85);border-radius:12px;padding:10px 32px}
.info div{display:grid;grid-template-columns:8em 1fr;gap:16px;padding:18px 0;border-bottom:1px dashed var(--line);font-size:15px}
.info div:last-child{border-bottom:0}
.info dt{font-family:var(--maru);font-weight:700;color:var(--lime-text)}
.info dd a{color:var(--pink);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.info dd a:hover{opacity:.7}
.pager{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(70px,8vw,100px);padding-top:30px;border-top:1px solid var(--line);font-family:var(--maru);font-weight:700;font-size:14px}
.pager a:not(.btn):hover{color:var(--pink)}
.pager .prev,.pager .next{flex:1}
.pager .next{text-align:right}
.pager small{display:block;font-family:var(--ja);font-weight:400;font-size:11px;color:var(--sub)}
@media (max-width:768px){
  .points,.gallery.two,.d-hero .main.two{grid-template-columns:1fr}
  .points>li{padding:24px 20px}
  .info{padding:6px 20px}
  .info div{grid-template-columns:1fr;gap:4px}
  .pager{flex-wrap:wrap}
  .pager .all{order:-1;width:100%;text-align:center}
  .pager .all .btn{display:flex;width:fit-content;margin-inline:auto}
}