/* 指定されたボタン文字だけに使う同梱フォント。利用条件はassets/fontsに保管。 */
@font-face{font-family:"Zen Kaku Gothic New";src:url("assets/fonts/ZenKakuGothicNew-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
:root{--ink:#583522;--pink:#f5dbd0;--rose:#ebc3b7;--button:#e2ad9d;--paper:#fff;--serif:"Shippori Mincho","しっぽり明朝","Yu Mincho",YuMincho,"Hiragino Mincho ProN","Noto Serif CJK JP",serif;--english:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0;font-weight:400}h2{font-size:clamp(21px,2.55vw,32px);letter-spacing:.1em}ul{list-style:none;margin:0;padding:0}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:7px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.skip-link{position:fixed;left:20px;top:-80px;z-index:20;background:white;padding:12px 20px}.skip-link:focus{top:12px}
.site-header{width:100%;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 13% 0 2.2%;gap:35px}.brand{display:block;flex-shrink:0;width:108px}.brand img{width:100%;mix-blend-mode:multiply}.primary-nav,.site-footer nav{display:flex;gap:clamp(22px,2.6vw,42px);font-family:var(--english);font-size:19px}.primary-nav a,.site-footer nav a{position:relative;padding:9px 0}.primary-nav a::after,.site-footer nav a::after{content:"";position:absolute;bottom:2px;left:0;width:100%;height:1px;background:var(--button);transform:scaleX(0);transform-origin:left;transition:transform .3s}.primary-nav a:hover::after,.site-footer nav a:hover::after{transform:scaleX(1)}.menu-toggle{display:none}
.hero{position:relative;margin-left:8.4%;width:91.6%;height:min(54vw,720px);min-height:410px;border-radius:0 0 0 120px;isolation:isolate;background:#d4cdc5;box-shadow:0 9px 0 0 #ffffff60;z-index:2}.hero-images{height:100%;position:relative;overflow:hidden;border-radius:inherit}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.15s ease}.hero-image.is-active{opacity:1}.hero h1{position:absolute;top:17%;left:3.2%;color:#fff;font-size:clamp(34px,4.3vw,62px);line-height:1.65;letter-spacing:.17em;text-shadow:1px 2px 5px #44342a99}.hero h1 span{padding-left:2em}.hero-controls{position:absolute;right:32px;bottom:24px;display:flex;align-items:center;gap:18px;background:#ffffffdc;border-radius:30px;padding:4px 10px;box-shadow:0 0 0 1px #58352210}.hero-dots{display:flex;gap:2px}.hero-dot{display:grid;place-items:center;width:28px;height:32px;background:transparent;padding:0}.hero-dot::before{content:"";width:6px;height:6px;border:1px solid var(--ink);border-radius:50%;transition:background .3s}.hero-dot.is-active::before{background:var(--ink)}.hero-pause{background:transparent;min-width:32px;min-height:32px;font-family:var(--english);font-size:14px}
.pink-surface{background:var(--pink);position:relative;isolation:isolate;overflow:hidden}.intro{margin-top:-110px;padding:250px 5% 90px}.thread{position:absolute;pointer-events:none;z-index:-1;width:45%;max-width:660px;stroke:#fff;stroke-width:2.5;opacity:.85}.thread-top{top:96px;right:-3%}.thread-left{width:32%;top:530px;left:-5%}.about-intro{max-width:690px;margin:0 auto;padding-bottom:135px}.section-label{font:400 clamp(24px,2.3vw,32px)/1.4 var(--english);width:fit-content;border-bottom:1px solid var(--button);padding-bottom:1px;margin:0 auto 34px;letter-spacing:0}.about-intro .section-label{margin-left:0;margin-bottom:48px}.about-intro h2{margin-bottom:48px}.copy{font-size:clamp(15px,1.45vw,19px);line-height:2;letter-spacing:.035em}.copy p+p{margin-top:30px}.more-link{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:12px;width:160px;min-height:60px;margin:60px auto 0;font:400 19px/1.5 var(--english)}.more-link::before{content:"";position:absolute;z-index:-1;left:8px;top:50%;width:55px;height:55px;background:#fff;border-radius:50%;transform:translateY(-50%);transition:width .65s ease,border-radius .65s ease,transform .65s ease}.more-link:hover::before,.more-link:focus-visible::before{width:144px;border-radius:40px;transition-delay:0s}.triangle{display:inline-block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor;flex-shrink:0}.more-link .triangle{transition:transform .4s}.more-link:hover .triangle{transform:translateX(5px)}.service-panel{background:white;border-radius:26px;margin:auto;padding:60px 8% 100px;max-width:1250px;text-align:center}.service-panel .section-label{margin-bottom:27px}.service-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:950px;margin:60px auto 0}.service-circle{aspect-ratio:1;border-radius:50%;background:var(--rose);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;position:relative;transition:border-radius .6s ease,transform .6s ease}.service-circle svg{width:42%;max-height:80px;stroke:var(--ink);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s}.service-circle h3{font-size:clamp(14px,1.6vw,22px);line-height:1.25;white-space:nowrap}.service-item:nth-child(2) svg{width:38%}.service-item:hover .service-circle{border-radius:42% 58% 61% 39% / 48% 42% 58% 52%;transform:translateY(-7px) rotate(-3deg)}.service-item:hover svg{transform:rotate(6deg) translateY(-3px)}
.works-section{padding:62px 0 70px;text-align:center;overflow:hidden}.works-section .section-label{margin-bottom:25px}.works-track{display:flex;gap:4.5%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:5px 3% 12px;margin-top:70px;overscroll-behavior-x:contain}.works-track::-webkit-scrollbar{display:none}.work-card{flex:0 0 24%;min-width:210px;scroll-snap-align:center;text-align:center;font-family:var(--serif);font-size:16px}.work-card img{aspect-ratio:1;width:100%;object-fit:cover;object-position:left top;border-radius:28px;transition:opacity .4s,transform .5s}.work-card:hover img{opacity:.85;transform:translateY(-5px)}.work-card>span{display:block;margin-top:18px}.work-card .work-ec{object-fit:cover}.carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}.carousel-controls button{width:42px;height:42px;border-radius:50%;background:#f8ebe5;border:1px solid transparent;font-size:21px;transition:background .2s}.carousel-controls button:hover{background:var(--rose)}.carousel-controls button:disabled{opacity:.35;cursor:default}.carousel-position{font:13px var(--english);letter-spacing:.12em}.works-section .more-link{margin-top:35px}.more-link-pink::before{background:var(--rose)}
.instagram-section{padding:60px 24px 90px;min-height:600px;text-align:center}.instagram-section .thread-top{top:-30px;right:-10%}.instagram-section .thread-left{top:auto;bottom:-140px;left:-3%}.instagram-content{max-width:540px;margin:62px auto 0}.instagram-card{background:#ffffffb0;border:1px solid #ffffffa8;border-radius:22px;padding:35px 20px;position:relative}.instagram-icon{width:34px;height:34px;stroke:var(--ink);stroke-width:1.4;margin-bottom:18px}.instagram-handle{font:20px var(--english);letter-spacing:.02em;margin-bottom:25px}.embed-load{background:var(--ink);color:white;border-radius:30px;min-height:46px;padding:10px 28px;font-size:14px}.embed-load:hover{background:#754c36}.embed-notice{font-family:var(--serif);font-size:11px;line-height:1.9;margin:18px 0 25px}.text-link{display:inline-block;font-size:13px;border-bottom:1px solid var(--button);padding-bottom:4px}.instagram-embed{margin-top:25px}.instagram-embed iframe{border:0;background:white;width:100%;height:520px;border-radius:18px}.embed-fallback{font-size:12px;line-height:1.8;margin-top:18px}
.contact-section{text-align:center;padding:64px 24px 82px}.contact-section .section-label{margin-bottom:26px}.contact-section h2{margin-bottom:32px}.contact-section .section-motion>p:not(.section-label){font-size:16px;line-height:1.9;letter-spacing:.035em}.contact-link{display:flex;justify-content:center;align-items:center;gap:22px;background:var(--button);border-radius:40px;width:fit-content;min-height:55px;padding:12px 36px;margin:48px auto 0;font-size:16px;transition:background .4s,transform .4s}.contact-link:hover{background:#d99b88;transform:translateY(-3px)}.contact-link .triangle{border-top-width:6px;border-bottom-width:6px;border-left-width:9px}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:40px;max-width:1200px;margin:0 auto;padding:35px 25px 60px}.site-footer nav{font-size:18px;gap:28px}.site-footer .brand{width:110px}
.about-page{background:var(--pink)}.about-header{position:absolute;top:22px;left:2.2%;z-index:5}.about-header .brand{width:108px}.about-main{padding:65px 30px 90px}.about-main .thread-top{top:-45px;right:-3%;width:45%}.about-thread-left{top:350px;left:-10%;width:29%}.about-statement{max-width:790px;margin:0 auto}.about-statement .section-label{margin-bottom:25px}.about-statement h1{text-align:center;font-size:clamp(23px,2.6vw,32px);letter-spacing:.03em;margin-bottom:65px}.about-statement .copy{font-size:16px;line-height:2.1}.about-statement .copy p+p{margin-top:28px}.profile-section{max-width:1080px;margin:90px auto 0}.profile-section .section-label{margin-bottom:46px}.profile-card{display:grid;grid-template-columns:34% 1fr;gap:9%;border-radius:24px;padding:55px 65px;background:#fff}.profile-photo{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;align-self:start}.profile-photo img{height:100%;width:100%;object-fit:cover;object-position:22% 28%;transform:scale(1.06)}.profile-copy h3{font-size:26px;letter-spacing:.18em;margin:0 0 26px;display:flex;align-items:baseline;flex-wrap:wrap;gap:20px}.profile-copy h3 span{font:14px var(--english);letter-spacing:.03em}.profile-copy p{font-size:16px;line-height:2;letter-spacing:.025em}.profile-copy p+p{margin-top:25px}.about-page .site-footer{max-width:none;background:white;padding:65px 10% 70px}
@media(min-width:1500px){.hero{height:760px}.intro{padding-top:270px}.about-intro{max-width:760px}.site-header{height:115px}.service-panel{padding-bottom:110px}}
@media(max-width:1000px){.site-header{height:76px;padding-right:8%;gap:20px}.brand{width:88px}.primary-nav{font-size:16px;gap:24px}.hero{min-height:380px;border-bottom-left-radius:90px}.intro{padding-top:220px;padding-bottom:70px}.about-intro{max-width:560px;padding-bottom:95px}.about-intro h2,.about-intro .section-label{margin-bottom:35px}.service-panel{padding:45px 8% 75px}.service-list{gap:20px;margin-top:44px}.service-circle{padding:10px;gap:8px}.site-footer nav{font-size:15px;gap:23px}.site-footer{padding:30px 9% 55px}.about-main{padding-top:70px}.about-statement{max-width:660px}.about-statement .copy{font-size:15px}.profile-card{padding:44px 38px;gap:7%;grid-template-columns:30% 1fr}.profile-copy h3{font-size:23px;gap:12px}.profile-copy p{font-size:14px}.about-header .brand{width:80px}.about-main .thread-top{width:40%}}
@media(max-width:760px){html{scroll-padding-top:20px}.site-header{height:auto;min-height:78px;padding:10px 22px;flex-wrap:wrap;gap:0;position:relative;z-index:6}.site-header>.brand{width:90px}.menu-toggle:not([hidden]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:transparent;min-width:46px;min-height:48px;padding:8px 0;margin-left:auto}.menu-label{font:12px var(--english);letter-spacing:.06em}.menu-lines{width:26px;height:10px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;transition:transform .3s}.menu-toggle[aria-expanded=true] .menu-lines{transform:rotate(-12deg)}.primary-nav{width:100%;justify-content:center;flex-wrap:wrap;gap:4px 24px;font-size:16px;padding:14px 0 8px}.js-enabled .primary-nav{display:none}.js-enabled .primary-nav.is-open{display:flex}.hero{margin-left:6%;width:94%;height:66vw;min-height:340px;border-bottom-left-radius:70px}.hero h1{top:17%;left:5%;font-size:clamp(28px,5.7vw,44px);letter-spacing:.13em;line-height:1.8}.hero h1 span{padding-left:1.4em}.hero-image{object-position:57% center}.hero-controls{right:14px;bottom:16px;padding:0 7px;gap:8px}.hero-dot{width:23px}.intro{margin-top:-70px;padding:160px 5% 55px}.about-intro{padding:0 6% 80px;max-width:580px}.about-intro .section-label{margin-bottom:30px}.about-intro h2{font-size:24px;margin-bottom:32px;line-height:1.7}.copy{font-size:15px;line-height:2.1}.copy p+p{margin-top:24px}.thread-top{top:60px;width:65%;right:-20%}.thread-left{top:380px;width:55%;left:-24%}.more-link{margin-top:36px;font-size:17px;min-height:55px;width:146px}.more-link::before{width:48px;height:48px}.more-link:hover::before{width:132px}.service-panel{border-radius:22px;padding:36px 7% 48px}.section-label{font-size:25px}.service-panel .section-label{margin-bottom:20px}.service-panel h2{font-size:22px}.service-list{grid-template-columns:repeat(2,1fr);gap:25px 20px;max-width:380px;margin-top:34px}.service-circle{padding:18px;gap:8px}.service-circle h3{font-size:17px}.service-circle svg{width:44%;max-height:62px}.service-item:nth-child(2) svg{width:36%}.works-section{padding:48px 0 50px}.works-section .section-label{margin-bottom:20px}.works-track{margin-top:40px;gap:24px;padding-left:7%;padding-right:7%;scroll-padding-inline:7%}.work-card{flex-basis:60%;min-width:0;max-width:310px;font-size:14px}.work-card img{border-radius:22px}.work-card>span{margin-top:14px}.carousel-controls{margin-top:20px}.instagram-section{padding:42px 24px 60px;min-height:500px}.instagram-content{margin-top:40px}.instagram-handle{font-size:19px}.instagram-card{padding:28px 16px}.instagram-section .thread-left{width:70%;left:-20%;bottom:-130px}.contact-section{padding:48px 26px 65px}.contact-section .section-label{margin-bottom:22px}.contact-section h2{font-size:24px;margin-bottom:28px}.contact-section .section-motion>p:not(.section-label){font-size:14px;line-height:2}.desktop-break{display:none}.contact-link{margin-top:32px;font-size:14px;min-height:50px;padding:12px 25px;gap:15px}.site-footer{padding:20px 26px 38px;gap:30px;flex-direction:column-reverse}.site-footer nav{justify-content:center;flex-wrap:wrap;gap:8px 22px;font-size:15px}.site-footer .brand{width:100px}.about-header{position:relative;top:auto;left:auto;padding:15px 22px 0}.about-header .brand{width:82px}.about-main{padding:25px 24px 60px}.about-statement .section-label{margin-bottom:22px}.about-statement h1{font-size:23px;margin-bottom:44px}.about-statement .copy{font-size:14px;line-height:2.1}.about-statement .copy p+p{margin-top:22px}.about-main .thread-top{top:-40px;right:-26%;width:70%}.about-thread-left{left:-33%;top:400px;width:70%}.profile-section{margin-top:55px}.profile-section .section-label{margin-bottom:30px}.profile-card{grid-template-columns:1fr;padding:35px 26px;gap:28px;border-radius:20px}.profile-photo{max-width:200px;margin:auto}.profile-copy h3{justify-content:center;font-size:23px;margin-bottom:26px;gap:15px}.profile-copy h3 span{font-size:12px}.profile-copy p{font-size:14px;line-height:2}.profile-copy p+p{margin-top:24px}.about-page .site-footer{padding:35px 24px 40px}}
.about-header{mix-blend-mode:multiply}
@media(max-width:760px){.about-intro h2{font-size:21px;letter-spacing:.06em}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.service-item:hover .service-circle,.service-item:hover svg,.work-card:hover img,.contact-link:hover{transform:none}}

.contact-link{font-family:"Zen Kaku Gothic New",sans-serif}
/* 元写真を加工せず、顔と肩が中心になる範囲を円内に表示する。 */
.profile-photo{position:relative}
.profile-photo img{position:absolute;width:210%;max-width:none;height:auto;left:-9%;top:-31%;transform:none}

/* プロフィール投稿一覧をページ内で表示し、読み込み前にMetaへの接続を案内する。 */
.instagram-section{padding-inline:5%;min-height:0}
.instagram-content{max-width:1250px;width:100%;margin:40px auto 0}
.instagram-embed{margin:0;background:#fff;border-radius:18px;overflow:hidden}
.instagram-embed iframe{display:block;width:100%;height:auto;aspect-ratio:1;min-height:500px;border:0;background:#fff}
.instagram-content .embed-notice{max-width:900px;margin:0 auto 16px;font-size:12px;line-height:1.8}
.instagram-content>.text-link{margin-top:18px}
@media(max-width:760px){.instagram-section{padding:42px 18px 60px}.instagram-content{margin-top:30px}.instagram-embed{border-radius:14px}.instagram-content .embed-notice{font-size:11px;margin-bottom:13px}}

/* サービス名は実テキストのまま、同梱のしっぽり明朝で表示する。 */
@font-face{font-family:"Service Shippori Mincho";src:url("assets/fonts/ShipporiMincho-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
.service-circle{gap:9px}
.service-circle h3{font-family:"Service Shippori Mincho",var(--serif);font-size:clamp(14px,1.8vw,25px);line-height:1.2}
.service-circle svg,.service-item:nth-child(2) svg{width:58%;height:auto;max-height:none;stroke:#79503d;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.service-item:hover .service-circle,.service-item:hover svg{border-radius:50%;transform:none}
/* 参考サイトで観察した、左から順に約0.4秒で拡大して現れる動き。 */
.service-list.is-animated .service-item{transform:scale(0);transition:transform .4s ease}
.service-list.is-visible .service-item{transform:scale(1);transition-delay:calc(var(--service-index) * .2s)}
.service-item:nth-child(1){--service-index:0}.service-item:nth-child(2){--service-index:1}.service-item:nth-child(3){--service-index:2}.service-item:nth-child(4){--service-index:3}
@media(max-width:760px){.service-circle h3{font-size:clamp(13px,4vw,17px)}.service-circle{gap:5px}}
@media(prefers-reduced-motion:reduce){.service-list.is-animated .service-item{transform:none;transition:none}}

/* 2行の項目名が円の下端・曲線にはみ出さないよう、3番目だけ余白を調整する。 */
.service-item:nth-child(3) .service-circle{gap:0}
.service-item:nth-child(3) h3{font-size:clamp(13px,1.65vw,23px);transform:translateY(-10px)}
@media(max-width:760px){.service-item:nth-child(3) h3{font-size:clamp(13px,3.7vw,16px);transform:translateY(-5px)}}

/* 白い画面中央のロゴが浮かび上がり、その後ページを見せる。JS無効時は表示しない。 */
.site-splash{display:none}
.js-enabled .site-splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#fff;pointer-events:none;animation:splash-out .55s ease-in-out 1.65s forwards}
.site-splash img{width:clamp(220px,25vw,340px);height:auto;opacity:0;animation:splash-logo-in 1s ease-out .1s forwards}
@keyframes splash-logo-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes splash-out{to{opacity:0;visibility:hidden}}
/* 参照サイトで観察した約200px・0.6秒の登場表現。背景のサイズは変えない。 */
[data-entrance].entrance-ready>.section-motion{opacity:0;transform:translateY(200px);transition:opacity .6s ease,transform .6s ease}
[data-entrance].is-revealed>.section-motion,[data-entrance]:focus-within>.section-motion{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.js-enabled .site-splash{display:none}[data-entrance].entrance-ready>.section-motion{opacity:1;transform:none;transition:none}}
@media print{.site-splash{display:none!important}[data-entrance].entrance-ready>.section-motion{opacity:1;transform:none}.service-list.is-animated .service-item{transform:none}}

/* 曲線をSVG自身の枠で切らず、ピンク背景の外側へ抜けるまで描く。 */
.thread{overflow:visible}

/* 左端の飾りは縦に引き延ばさず、短く緩やかに折り返して画面外へ戻す。 */
.works-track.has-auto-scroll{scroll-snap-type:none}

/* 小さくした曲線がスマートフォンでも左端に少し見える位置に揃える。 */
@media(max-width:760px){.intro>.thread-left{left:-18%}}

/* 右側と同じS字を向きを変えて配置し、丸い山型に見えない形に揃える。 */
.thread-left{width:45%;left:-3%}
@media(max-width:760px){.intro>.thread-left{width:65%;left:-20%}}

/* Serviceの白枠より下に続く飾り線を、背景色で隠して白枠で終わらせる。 */
.intro{--intro-bottom-space:90px;padding-bottom:var(--intro-bottom-space)}
.intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--intro-bottom-space);background:var(--pink);z-index:-1;pointer-events:none}
@media(max-width:1000px){.intro{--intro-bottom-space:70px}}
@media(max-width:760px){.intro{--intro-bottom-space:55px}}

/* PCと同じSVG・縦横比を使い、スマホでは余白に合わせて配置する。PCの設定は変更しない。 */
@media(max-width:760px){
  .intro>.thread-top{width:45%;right:-3%;top:55px}
  .intro>.thread-left{width:45%;left:-3%;top:calc(var(--service-top,900px) - 28vw)}
  .instagram-section>.thread-top{width:45%;right:-3%;top:-30px}
  .instagram-section>.thread-left{width:45%;left:-3%;top:auto;bottom:-70px}
  .about-main>.thread-top{width:45%;right:-3%;top:-45px}
  .about-main>.about-thread-left{width:29%;left:-10%;top:calc(var(--profile-top,700px) - 40px)}
}