/*
Theme Name: FS Portfolio
Description: FS design（株式会社Femme Creatives）制作実績ポートフォリオ用の軽量テーマ。制作実績は「FS Works」プラグインで管理します。
Author: Femme Creatives
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: fs-portfolio
*/

:root{--ink:#2b2422;--brown:#4a3a33;--sub:#6f5a50;--line:#d9d0cb;--peach:#f3d6c4;--lav:#cfd6ee;--bg:#fdfcfb;
--serif:'Cormorant Garamond',serif;--sans-en:'Josefin Sans',sans-serif;--mincho:'Shippori Mincho',serif;--gothic:'Zen Kaku Gothic New',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--gothic);font-size:15px;line-height:2;letter-spacing:.1em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
a:hover{color:#8a6f63}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:100;background:#fff;padding:12px 20px}
.fs-wrap{overflow:hidden;position:relative}

/* motion */
@keyframes fsRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes fsFade{from{opacity:0}to{opacity:1}}
@keyframes fsDriftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-40px) scale(1.15)}}
@keyframes fsDriftB{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-60px,50px) scale(.9)}}
@keyframes fsUp{to{transform:translateY(-50%)}}
@keyframes fsLeft{to{transform:translateX(-50%)}}
@keyframes fsRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes fsSpin{to{transform:rotate(360deg)}}
@keyframes fsLine{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 fsOpen{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.fs-rise{animation:fsRise 1.2s cubic-bezier(.2,.7,.2,1) both}
.fs-d1{animation-delay:.2s}.fs-d2{animation-delay:.45s}.fs-d3{animation-delay:.7s}
.fs-fade{animation:fsFade 1.8s ease both;animation-delay:1.1s}
.fs-reveal{opacity:0;transform:translateY(60px);filter:blur(10px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),filter 1.2s ease}
.fs-reveal.is-in{opacity:1;transform:none;filter:blur(0)}
.no-js .fs-reveal{opacity:1;transform:none;filter:none}
.fs-blob{position:absolute;border-radius:50%;pointer-events:none;opacity:.8}
.fs-blob--p{background:var(--peach);filter:blur(48px);animation:fsDriftB 19s ease-in-out infinite}
.fs-blob--l{background:var(--lav);filter:blur(60px);animation:fsDriftA 15s ease-in-out infinite}

/* header (下層ページ) */
.fs-header{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:26px 5vw}
.fs-logo{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.fs-logo b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;letter-spacing:-.04em}
.fs-logo span{font-family:var(--sans-en);font-weight:300;font-size:13px;letter-spacing:.28em;text-transform:uppercase}
.fs-nav{display:flex;flex-wrap:wrap;gap:8px 30px;font-family:var(--mincho);font-size:14px;letter-spacing:.2em}
.fs-nav a{text-decoration:none;padding:12px 0}
.fs-nav a[aria-current]{border-bottom:1px solid var(--ink)}

/* hero */
.fs-hero{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;min-height:min(860px,100vh)}
.fs-hero__title{position:relative;z-index:2;flex:1 1 380px;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:80px 5vw}
.fs-hero h1{margin:0;font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:0}
.fs-hero h1 span{display:block}
.fs-hero h1 .l1{font-size:clamp(60px,7.2vw,108px);letter-spacing:-.02em}
.fs-hero h1 .l2{font-style:italic;font-size:clamp(42px,5vw,76px)}
.fs-hero__sub{margin-top:40px;display:flex;align-items:center;gap:22px}
.fs-hero__sub i{display:block;width:72px;height:1px;background:#8a6f63}
.fs-hero__sub p{margin:0;font-family:var(--sans-en);font-size:12px;line-height:1.9;letter-spacing:.3em;color:var(--sub)}
.fs-hero__copy{margin:36px 0 0;font-family:var(--serif);font-size:17px;letter-spacing:.34em}
.fs-hero__visual{position:relative;z-index:2;flex:0 1 400px;min-width:280px;height:min(860px,100vh);overflow:hidden;background:#e9e4ea;animation:fsOpen 1.6s cubic-bezier(.7,0,.2,1) both;animation-delay:.2s}
.fs-hero__reel{display:flex;flex-direction:column;gap:14px;animation:fsUp 36s linear infinite}
.fs-hero__reel img{width:100%;height:300px;object-fit:cover;object-position:left top}
.fs-hero__side{position:relative;z-index:2;flex:1 1 300px;min-width:0;padding:90px 5vw 60px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:48px}
.fs-vnav{display:flex;flex-direction:row-reverse;gap:30px;font-family:var(--mincho);font-size:15px;letter-spacing:.3em}
.fs-vnav a{writing-mode:vertical-rl;text-decoration:none;padding:6px 12px;transition:letter-spacing .4s ease}
.fs-vnav a:hover{letter-spacing:.5em}
.fs-scroll{align-self:flex-end;display:flex;flex-direction:column;align-items:center;gap:12px}
.fs-scroll svg{width:130px;height:130px}
.fs-scroll .spin{animation:fsSpin 26s linear infinite;transform-origin:50% 50%}
.fs-scroll i{display:block;width:1px;height:50px;background:var(--ink);animation:fsLine 2.4s ease-in-out infinite}

/* section heading */
.fs-sec{position:relative;padding:150px 5vw 80px}
.fs-head{position:relative;display:flex;align-items:center;gap:44px;margin:0 0 130px}
.fs-head--r{flex-direction:row-reverse}
.fs-head i{display:block;flex:0 1 160px;height:1px;background:var(--ink)}
.fs-head h1,.fs-head h2{margin:0;font-family:var(--mincho);font-weight:500;font-size:clamp(26px,3vw,38px);letter-spacing:.3em;line-height:1.5}
.fs-head em{font-family:var(--serif);font-style:italic;font-size:22px;color:#8a6f63;letter-spacing:.04em}

/* work rows (TOP) */
.fs-rows{position:relative;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:170px}
.fs-row{display:flex;flex-wrap:wrap;align-items:center;gap:48px 100px;text-decoration:none}
.fs-row:nth-child(even){flex-direction:row-reverse}
.fs-shot{flex:1 1 440px;min-width:0;overflow:hidden;box-shadow:0 40px 70px rgba(43,36,34,.14);background:#efe9ea}
.fs-shot img{width:100%;aspect-ratio:5/3;object-fit:cover;object-position:left top;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
a.fs-row:hover .fs-shot img,a.fs-card:hover .fs-shot img{transform:scale(1.06)}
.fs-row__body{flex:1 1 320px;min-width:0}
.fs-tag{margin:0 0 14px;font-family:var(--sans-en);font-size:13px;letter-spacing:.2em;color:var(--sub);line-height:1.6}
.fs-row h3,.fs-card h2{margin:0 0 26px;font-family:var(--mincho);font-weight:500;font-size:27px;letter-spacing:.16em;line-height:1.6}
.fs-row p.desc{margin:0 0 18px}
.fs-scope{margin:0 0 26px;font-family:var(--sans-en);font-size:13px;letter-spacing:.16em;color:var(--sub);line-height:1.8}
.fs-more{margin:0;text-align:right;font-size:13px;letter-spacing:.14em}
.fs-more span{display:inline-block;padding-bottom:6px;border-bottom:1px solid var(--ink)}
.fs-more b{display:inline-block;font-weight:400;transition:transform .5s ease}
a:hover .fs-more b{transform:translateX(10px)}
.fs-center{text-align:center;padding-top:150px}
.fs-circle-link{display:inline-flex;align-items:center;gap:32px;text-decoration:none;font-family:var(--mincho);font-size:16px;letter-spacing:.24em}
.fs-circle-link i{display:flex;align-items:center;justify-content:center;width:98px;height:98px;border:1px solid #cdbfb8;border-radius:50%;font-style:normal;font-size:22px;transition:background-color .5s ease,transform .5s ease}
.fs-circle-link:hover i{background:var(--peach);transform:scale(1.1)}

/* services */
.fs-pills{position:relative;max-width:980px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 16px;list-style:none;padding:0}
.fs-pills li{padding:12px 34px;border:1px solid var(--ink);border-radius:999px;background:#fff;font-family:var(--mincho);font-size:17px;letter-spacing:.14em}

/* about */
.fs-about{position:relative;max-width:980px;margin:0 auto;display:flex;flex-wrap:wrap-reverse;align-items:center;gap:56px 90px}
.fs-about__body{flex:3 1 400px;min-width:0}
.fs-about__body .en{margin:0 0 10px;font-family:var(--sans-en);font-size:12px;letter-spacing:.28em;color:var(--sub)}
.fs-about__body h3{margin:0 0 34px;font-family:var(--mincho);font-weight:500;font-size:27px;letter-spacing:.16em}
.fs-about__body p.lead{margin:0 0 54px;line-height:2.2}
.fs-about__visual{flex:2 1 260px;max-width:340px;aspect-ratio:3/4;background:linear-gradient(160deg,#f3d6c4,#e9e4ea 45%,#cfd6ee);box-shadow:0 40px 70px rgba(43,36,34,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.fs-about__visual b{font-family:var(--serif);font-weight:400;font-size:110px;line-height:1;letter-spacing:-.04em}
.fs-about__visual span{font-family:var(--serif);font-size:13px;letter-spacing:.34em;text-align:center;line-height:1.9}
.fs-about__visual img{width:100%;height:100%;object-fit:cover}

/* marquee */
.fs-marquee{padding:20px 0 150px;overflow:hidden;display:flex;flex-direction:column;gap:28px}
.fs-marquee__row{white-space:nowrap}
.fs-marquee__track{display:inline-flex;gap:28px;animation:fsLeft 60s linear infinite}
.fs-marquee__row:nth-child(2) .fs-marquee__track{animation:fsRight 70s linear infinite}
.fs-marquee img{width:380px;height:228px;max-width:none;object-fit:cover;object-position:left top;border-radius:14px}

/* contact */
.fs-contact{position:relative;margin:0 -12vw;padding:190px 17vw 60px;border-radius:50% 50% 0 0 / 150px 150px 0 0;background:#e6e3ee;text-align:center;overflow:hidden}
.fs-contact .fs-blob{opacity:.95;filter:blur(90px)}
.fs-contact__in{position:relative}
.fs-contact__thanks{margin:0 0 30px;font-family:var(--mincho);font-weight:500;font-size:clamp(17px,2vw,22px);letter-spacing:.3em}
.fs-contact__big{margin:0 0 40px;font-family:var(--sans-en);font-size:clamp(54px,11vw,168px);line-height:1;letter-spacing:.14em;color:transparent;-webkit-text-stroke:1px #fff}
.fs-contact h2{margin:0 0 34px;font-size:15px;font-weight:400;letter-spacing:.16em}
.fs-pillbtn{display:inline-block;min-width:min(300px,100%);padding:20px 48px;border:1px solid #8a6f63;border-radius:999px;background:#fff;text-decoration:none;font-size:15px;letter-spacing:.2em;transition:background-color .4s ease,color .4s ease}
.fs-pillbtn:hover{background:var(--ink);color:#fff}
.fs-footer{position:relative;margin-top:120px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;font-size:13px;color:var(--brown)}
.fs-footer b{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);letter-spacing:.02em}
.fs-footer a{text-decoration:none}

/* works archive */
.fs-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0 0 80px;margin:0;list-style:none}
.fs-filter button{min-height:46px;padding:0 26px;border:1px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-family:var(--gothic);font-size:14px;letter-spacing:.1em;cursor:pointer;transition:background-color .35s ease,color .35s ease}
.fs-filter button[aria-pressed="true"],.fs-filter button:hover{background:var(--ink);color:#fff}
.fs-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:100px 64px}
.fs-card{display:block;text-decoration:none}
.fs-card[hidden]{display:none}
.fs-card .fs-shot img{aspect-ratio:16/10}
.fs-card__body{padding-top:30px}
.fs-card h2{font-size:23px;margin-bottom:12px}
.fs-card p.desc{margin:0 0 10px;font-size:14px;line-height:1.9}
.fs-card .fs-scope{margin-bottom:0}
.fs-count{font-family:var(--serif);font-style:italic;font-size:20px;color:#8a6f63;letter-spacing:.04em}

/* single */
.fs-single{max-width:1080px;margin:0 auto}
.fs-single__hero{box-shadow:0 40px 70px rgba(43,36,34,.14);margin:0 0 90px;background:#efe9ea}
.fs-single__hero img{width:100%}
.fs-single h1{margin:0 0 50px;font-family:var(--mincho);font-weight:500;font-size:clamp(26px,3.4vw,40px);letter-spacing:.16em;line-height:1.6}
.fs-dl{margin:0 0 70px;border-top:1px solid var(--line)}
.fs-dl div{display:flex;flex-wrap:wrap;gap:6px 40px;padding:26px 6px;border-bottom:1px solid var(--line)}
.fs-dl dt{flex:0 0 180px;font-family:var(--mincho);letter-spacing:.2em}
.fs-dl dd{flex:1 1 320px;margin:0;min-width:0;overflow-wrap:anywhere}
.fs-content{max-width:780px;margin:0 auto}
.fs-content h2{font-family:var(--mincho);font-weight:500;font-size:24px;letter-spacing:.16em;margin:2.4em 0 1em}
.fs-content img{box-shadow:0 30px 60px rgba(43,36,34,.12);margin:2em 0}
.fs-sec.fs-pagehead{padding-top:60px}

@media (max-width:860px){
.fs-hero__visual{flex:1 1 100%;height:420px;order:-1}
.fs-hero__title{padding:60px 7vw 30px}
.fs-hero__side{padding:20px 7vw 60px;flex-direction:row;align-items:flex-end}
.fs-vnav{gap:10px}
.fs-sec{padding:110px 7vw 60px}
.fs-head{gap:22px;margin-bottom:80px}
.fs-head i{flex-basis:50px}
.fs-rows{gap:110px}
.fs-center{padding-top:100px}
.fs-marquee img{width:260px;height:156px}
.fs-contact{padding-top:130px;border-radius:50% 50% 0 0 / 70px 70px 0 0}
.fs-dl dt{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.fs-reveal{opacity:1;transform:none;filter:none}
html{scroll-behavior:auto}
}