/* このサイトは明るい配色でのみ表示する。
   宣言がないと、端末のダークモード時にブラウザが勝手に色を反転させる */
:root{ color-scheme: light; }

:root{
  --paper:#fbf7f5;
  --sand:#f4e4e1;
  --ink:#4a3b39;
  --ink-soft:#7a6866;
  --rose:#c9807e;
  --rose-deep:#a3595a;
  --pink:#e39e9c;
  --pale:#eccfcb;
  --sage:#b6c19a;       /* ハーブグリーン */
  --leaf:#8fa06d;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  /* 固定ヘッダー（約65px）の下に見出しが潜り込まないよう余白を確保 */
  scroll-padding-top:90px;
}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.9; font-size:16px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.mincho{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"游明朝",serif;}
.en{font-family:"Poppins",sans-serif; font-weight:600; letter-spacing:.1em;}
.wrap{max-width:1280px; margin:0 auto; padding:0 1.5rem;}
.narrow{max-width:780px; margin:0 auto;}

/* ---------- ヘッダー（日本語＋英字の2段ラベル） ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(251,247,245,.94); backdrop-filter:blur(6px);}
nav{max-width:1300px; margin:0 auto; padding:.9rem 1.5rem; display:flex; align-items:center; gap:2.5rem;}
.brand{text-decoration:none; color:var(--ink); line-height:1.3;}
.brand b{display:block; font-size:1.15rem; font-weight:600; letter-spacing:.04em;}
.brand small{display:block; font-size:.6rem; color:var(--rose); letter-spacing:.22em;}
.nav-links{margin-left:auto; display:flex; gap:2rem; list-style:none; text-align:center;}
.nav-links a{text-decoration:none; color:var(--ink); font-size:.9rem; line-height:1.35;}
.nav-links a span{display:block; font-size:.58rem; color:var(--rose); letter-spacing:.16em;}
.nav-links a:hover{color:var(--rose-deep);}

/* ---------- ファーストビュー ---------- */
.hero{position:relative; padding:3.5rem 0 0;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center;}
.hero-visual{position:relative;}
.mv-shot.main{width:100%; aspect-ratio:1/.92; position:relative; z-index:1;}
.hero-copy{position:relative; padding:3rem 0;}
/* 右下の小さな写真。文字には重ねず、本文の下に置く */
.mv-shot.sub{border:6px solid var(--paper);}
.hero-copy h1{font-size:clamp(20px, 1.85vw, 30px); font-weight:500; line-height:200%;
              letter-spacing:.1em;}   /* 参考サイトの指定値そのまま */
.hero-copy h1 em{font-style:normal; background:linear-gradient(transparent 66%, var(--sand) 66%);}
.hero-en{font-size:.95rem; color:var(--rose); margin-bottom:1.4rem;}
.hero-tag{font-size:.8rem; color:var(--ink-soft); letter-spacing:.12em; margin-bottom:.5rem;}
.hero-sub{margin-top:1.8rem; font-size:.92rem; color:var(--ink-soft); line-height:2.1;}
.hero-actions{display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap;}
.btn{display:inline-block; text-decoration:none; padding:.8rem 1.9rem; border-radius:999px; font-size:.9rem;}
.btn-fill{background:var(--rose-deep); color:#fff;}
.btn-fill:hover{background:#8a4749;}
.btn-line{border:1.5px solid var(--ink); color:var(--ink);}
.btn-line:hover{background:var(--ink); color:var(--paper);}

/* 装飾（フラットな小物） */
.deco{position:absolute; pointer-events:none;}
.deco-badge{width:74px; height:74px; border-radius:50%; background:var(--pink);
            display:grid; place-items:center; color:#fff; font-size:1.5rem;}
.deco-leaf{top:30%; left:-46px; width:120px; height:120px; background:var(--sage); opacity:.5; z-index:0;
           border-radius:58% 42% 47% 53% / 45% 55% 45% 55%;}
.deco-badge{top:.5rem; right:0;}

/* 波の仕切り：ファーストビューの下は流し込み、各セクションは下端に重ねる */
.hero .wave{display:block; width:100%; height:90px; margin-top:-1px;}
.blk{position:relative;}
.blk > .wave{position:absolute; left:0; bottom:-1px; width:100%; height:70px; display:block;}
@media(max-width:900px){
  .hero .wave{height:55px;}
  .blk > .wave{height:44px;}
}

/* ---------- セクション ---------- */
section.blk{padding:5rem 0;}
.blk-sand{background:var(--sand);}
.label{font-size:.72rem; color:var(--rose); margin-bottom:.5rem;}
h2.ttl{font-size:1.8rem; font-weight:400; line-height:1.6; margin-bottom:.7rem; letter-spacing:.05em;}
.ttl-sub{color:var(--ink-soft); font-size:.92rem; margin-bottom:2.6rem;}
.head-center{text-align:center;}

/* 事業内容：白いカードに写真を収める */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.8rem;}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr);}}
.card{background:#fff; border-radius:20px; overflow:hidden; display:flex; flex-direction:column; text-align:left;}
.card .card-img{position:relative; aspect-ratio:4/3; background:#fff;}
/* 写真は枠いっぱいに拡大。ロゴなどの図版だけ全体を見せる */
.card .card-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.card .card-img img.fit-contain{object-fit:contain;}
.card .card-in{padding:1.3rem 1.4rem 1.6rem; flex:1; display:flex; flex-direction:column;}
.card h3{font-size:1.02rem; margin-bottom:.6rem; font-weight:600;}
.card p{font-size:.87rem; color:var(--ink-soft); line-height:1.95; flex:1;}
.card a{margin-top:1rem; font-size:.85rem; color:var(--leaf); text-decoration:none; border-bottom:1px solid var(--sage); align-self:flex-start;}

/* 実績 */
.rec{display:flex; gap:2.5rem; align-items:center; margin-bottom:3rem;
     text-decoration:none; color:inherit; transition:transform .25s;}
.rec:hover{transform:translateY(-3px);}
.rec:hover .rec-ttl{color:var(--rose-deep);}
.rec:hover .rec-more{border-bottom-color:var(--leaf);}
.rec:nth-child(odd){flex-direction:row-reverse;}
.rec img{width:46%; border-radius:24px; display:block;}
.rec-tag{display:inline-block; background:var(--rose-deep); color:#fff; font-size:.7rem; padding:.25rem .9rem; border-radius:999px; margin-bottom:.7rem;}
.rec-date{font-size:.8rem; color:var(--ink-soft);}
.rec-ttl{font-size:1.05rem; line-height:1.8; margin-top:.3rem;}
.rec-more{display:inline-block; margin-top:.7rem; font-size:.85rem; color:var(--leaf);
          border-bottom:1px solid var(--sage);}

/* お知らせ */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;}
.news-card{text-decoration:none; color:inherit; display:block;}
.news-card .thumb{position:relative; aspect-ratio:4/3; background:#fff; border-radius:20px; overflow:hidden; margin-bottom:.8rem;}
/* 写真は枠いっぱいに拡大して余白を作らない。ロゴなどの図版だけ全体を見せる */
.news-card .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
                      opacity:0; transition:opacity .45s ease;}
.news-card .thumb img.fit-contain{object-fit:contain;}
.news-card .thumb img.is-loaded{opacity:1;}
.news-card .date{font-size:.78rem; color:var(--leaf); margin-bottom:.3rem;}
.news-card .t{font-size:.9rem; line-height:1.7;}
.news-card:hover .t{color:var(--rose-deep);}
.more{text-align:center; margin-top:3rem;}

/* 由来・代表 */
.story{text-align:center;}
.story .lead{font-size:1.2rem; line-height:2.2; margin-bottom:2rem;}
.story p.body{color:var(--ink-soft); font-size:.94rem; margin-bottom:1.2rem; text-align:left;}
.profile{display:flex; gap:3rem; align-items:center;}
.profile img{width:300px; height:auto; border-radius:20px; display:block; flex-shrink:0;}
.profile h3{font-size:1.3rem; margin-bottom:.2rem;}
.profile .role{color:var(--rose); font-size:.85rem; margin-bottom:1.2rem;}
.profile p{font-size:.92rem; color:var(--ink-soft); margin-bottom:1rem;}
.career{font-size:.82rem; border-left:3px solid var(--sage); padding-left:1rem;}

table{width:100%; border-collapse:collapse; font-size:.92rem;}
th,td{text-align:left; padding:1rem .5rem; border-bottom:1px solid var(--sage);}
th{width:150px; font-weight:600;}
td{color:var(--ink-soft);}

.cta{background:var(--rose-deep); color:#fff; border-radius:32px; padding:4rem 2rem; text-align:center;}
.cta h2{font-size:1.65rem; margin-bottom:1rem; font-weight:400;}
.cta p{opacity:.9; font-size:.94rem; margin-bottom:2rem;}
.cta .btn-fill{background:#fff; color:var(--rose-deep);}
.cta .btn-fill:hover{background:var(--sand);}
.sns{display:flex; gap:1rem; justify-content:center; margin-top:2rem;}
.sns a{color:#fff; text-decoration:none; font-size:.85rem; border:1px solid rgba(255,255,255,.55); padding:.5rem 1.4rem; border-radius:999px;}

footer{padding:3.5rem 0 2.5rem; text-align:center; font-size:.85rem; color:var(--ink-soft);}
footer a{color:var(--ink-soft);}
.fnav{margin:1rem 0;}

@media(max-width:900px){
  html{scroll-padding-top:130px;}
  .hero-grid{grid-template-columns:1fr; gap:2rem;}
  .mv-shot.sub{width:75% !important; margin:1.5rem auto 0 !important;}
  .deco-leaf{display:none;}
  .deco-badge{display:none;}
  .cards,.news-grid{grid-template-columns:1fr;}
  .rec,.rec:nth-child(odd){flex-direction:column;}
  .rec img{width:100%;}
  .profile{flex-direction:column; text-align:center;}
  .hero-copy h1{font-size:min(24px, 5.7vw); line-height:200%;}
  .nav-links{gap:1rem;}
  nav{flex-wrap:wrap; gap:.8rem;}
}

/* ==========================================================
   参考サイト（yamauchinotori.jp）の読み込み時タイムラインを再現。
   向こうは GSAP + MorphSVG、こちらは CSS と素のJSで同じ値を組み直している。

   GSAPのイージング → CSSの近似
     expo.out        cubic-bezier(.16, 1, .3, 1)
     power2.out      cubic-bezier(.25, .46, .45, .94)
     back.out(1.45)  cubic-bezier(.34, 1.45, .64, 1)
     CustomEase(pop) cubic-bezier(.12, .72, .42, 1.08)
     sine.inOut      cubic-bezier(.37, 0, .63, 1)
   ========================================================== */
:root{
  --e-expo:cubic-bezier(.16, 1, .3, 1);
  --e-power2:cubic-bezier(.25, .46, .45, .94);
  --e-back:cubic-bezier(.34, 1.45, .64, 1);
  --e-pop:cubic-bezier(.12, .72, .42, 1.08);
  --e-sine:cubic-bezier(.37, 0, .63, 1);
}

/* --- ヘッダー：y -12px から 0.8秒。トップページ以外は最初から表示する --- */
body.home header{opacity:0; transform:translateY(-12px);}
body.home.ready header{animation:hdrIn .8s var(--e-power2) .35s forwards;}
@keyframes hdrIn{to{opacity:1; transform:translateY(0);}}

/* --- 見出し：1行ずつマスクし、1文字ずつ下から。stagger 40ms / back.out(1.45) / 0.7秒 --- */
.mv-copy .line{display:block; overflow:hidden;}
.mv-copy .line-inner{display:block;}
.mv-copy .ch{display:inline-block; opacity:0; transform:translateY(80%); transform-origin:50% 100%;
             will-change:opacity,transform;}
.ready .mv-copy .ch{animation:chIn .7s var(--e-back) forwards; animation-delay:var(--d);}
@keyframes chIn{to{opacity:1; transform:translateY(0);}}

/* --- 主写真：yPercent 30→0（1.2秒 expo.out）＋ scale .6→1（1.65秒 pop）
       内側の画像は scale 1.5→1（2.3秒）。外枠の形は絶えず変形し続ける --- */
.mv-shot{opacity:0; transform:translateY(30%) scale(.6); overflow:hidden;
         border-radius:46% 54% 42% 58% / 52% 45% 55% 48%;
         animation:blob 9s var(--e-sine) infinite alternate;}
.mv-shot.sub{transform:translateY(20%) scale(.5);}
.ready .mv-shot{animation:shotUp 1.2s var(--e-expo) forwards,
                          shotPop 1.65s var(--e-pop) forwards,
                          blob 9s var(--e-sine) 1.8s infinite alternate;}
.ready .mv-shot.sub{animation-delay:.35s, .35s, 2.1s;}
@keyframes shotUp{to{opacity:1; transform:translateY(0) scale(1);}}
@keyframes shotPop{to{opacity:1; transform:translateY(0) scale(1);}}
@keyframes blob{
  0%  {border-radius:46% 54% 42% 58% / 52% 45% 55% 48%;}
  50% {border-radius:52% 48% 55% 45% / 44% 56% 44% 56%;}
  100%{border-radius:43% 57% 48% 52% / 56% 42% 58% 44%;}
}
.mv-shot img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.5);}
.ready .mv-shot img{animation:imgZoom 2.3s var(--e-pop) forwards;}
.ready .mv-shot.sub img{animation-delay:.35s;}
@keyframes imgZoom{to{transform:scale(1);}}

/* 登場が終わったら変形の指定を完全に外す。
   変形が残ったままだと、画面によっては画像がぼやけて表示されるため */
.mv-shot.settled{animation:blob 9s var(--e-sine) infinite alternate !important;
                 opacity:1 !important; transform:none !important;}
.mv-shot.settled img{animation:none !important; transform:none !important; opacity:1 !important;}

/* --- 飾り：scale .98 / yPercent 8 から back.out(1.4)。その後ずっと小刻みに揺れる --- */
.deco{opacity:0; transform:translateY(8%) scale(.98);}
.ready .deco{animation:decoIn 1.2s var(--e-back) forwards; animation-delay:var(--d, 1s);}
@keyframes decoIn{to{opacity:1; transform:translateY(0) scale(1);}}
.ready .deco.wiggle{animation:decoIn 1.2s var(--e-back) var(--d, 1s) forwards,
                              wiggle 6s linear 2.4s infinite;}
/* 参考サイトの homeMvIllust1 をそのまま移植（前半だけ揺れて後半は休む） */
@keyframes wiggle{
  0%{transform:rotate(-1deg) translate(-1px,.5px)}
  5%{transform:rotate(.8deg) translate(.5px,-1px)}
  10%{transform:rotate(-.7deg) translate(1px,.5px)}
  15%{transform:rotate(.5deg) translate(-.5px,1px)}
  20%{transform:rotate(-1.2deg) translate(.5px,-.5px)}
  25%{transform:rotate(.7deg) translate(-1px,-.5px)}
  30%{transform:rotate(-.5deg) translateY(1px)}
  35%{transform:rotate(1deg) translate(.5px)}
  40%{transform:rotate(0) translate(0)}
  45%,100%{transform:rotate(0) translate(0)}
}

/* --- 本文まわりは見出しのあとに続けて出す --- */
.mv-fade{opacity:0; transform:translateY(1rem);}
.ready .mv-fade{animation:mvFade .9s var(--e-expo) forwards; animation-delay:var(--d);}
@keyframes mvFade{to{opacity:1; transform:translateY(0);}}

/* --- 波形：下から迫り上がる（向こうはSVGパスのモーフィング） --- */
.hero .wave{transform:translateY(40%); opacity:0;}
.ready .hero .wave{animation:waveIn 1.2s cubic-bezier(.76,0,.24,1) .5s forwards;}
@keyframes waveIn{to{transform:translateY(0); opacity:1;}}

/* --- 2画面目以降：Dawn の scroll-trigger と同じ（0.6秒 / 段差75ms / 手前50px） --- */
@keyframes slideIn{0%{transform:translateY(2rem); opacity:.01;} to{transform:translateY(0); opacity:1;}}
.reveal{opacity:.01; transform:translateY(2rem);}
.reveal.is-in{animation:slideIn .6s cubic-bezier(0, 0, .3, 1) forwards;
              animation-delay:calc(var(--order, 0) * 75ms);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  body.home header,.mv-copy .ch,.mv-shot,.mv-shot img,.deco,.mv-fade,.hero .wave,.reveal{
    opacity:1 !important; transform:none !important; animation:none !important;}
}

/* ==========================================================
   個別ページ（お知らせ一覧・記事・創業の思い・プライバシー）
   トップと同じ配色・書体で組む
   ========================================================== */
.container{max-width:1280px; margin:0 auto; padding:0 1.5rem;}
.section{padding:5rem 0;}
.section-gray{background:var(--sand);}
.section-label{font-size:.72rem; color:var(--rose); margin-bottom:.5rem; letter-spacing:.1em;
               font-family:"Poppins",sans-serif; font-weight:600;}
.section-more{text-align:center; margin-top:2.8rem;}

/* 戻るリンクの帯 */
.page-header{padding:2.2rem 0 0;}
.page-header a{color:var(--rose-deep); text-decoration:none; font-size:.88rem;
               border-bottom:1px solid var(--sage);}
.page-header a:hover{border-bottom-color:var(--rose-deep);}
.page-header h1{font-size:1.6rem; font-weight:400; margin-top:1.2rem; letter-spacing:.05em;
                font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;}

/* 記事ページ */
.detail-content{max-width:840px;}
.detail-date{color:var(--rose); font-size:.85rem; text-align:center; margin-bottom:.8rem;
             font-family:"Poppins",sans-serif; font-weight:600; letter-spacing:.06em;}
.detail-title{font-size:1.5rem; font-weight:500; line-height:1.75; text-align:center;
              letter-spacing:.04em; margin-bottom:2.8rem;
              font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;}
.detail-text{color:var(--ink-soft); line-height:2;}
.detail-text p{margin-bottom:1.3rem;}
.detail-text strong{color:var(--ink); font-weight:600;}
.detail-text a{color:var(--rose-deep);}
.detail-text blockquote{border-left:3px solid var(--sage); padding:.4rem 1.3rem;
                        margin:1.6rem 0; color:var(--ink);}
.detail-img{display:block; max-width:100%; max-height:660px; width:auto; height:auto;
            margin:0 auto 2rem;}
.detail-text img{width:100%; margin:1.5rem 0;}
.img-2col,.img-3col{display:grid; gap:1rem; margin:1.8rem 0;}
.img-2col{grid-template-columns:1fr 1fr;}
.img-3col{grid-template-columns:1fr 1fr 1fr;}
.img-2col img,.img-3col img{width:100%; margin:0;}

/* 創業の思い・プライバシー */
.concept-page,.privacy-content{max-width:840px;}
.concept-lead{font-size:1.15rem; line-height:2.1; margin-bottom:2rem; text-align:center;
              font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;}
.concept-body,.concept-closing{color:var(--ink-soft); margin-bottom:1.3rem;}
.privacy-content h2{font-size:1.15rem; font-weight:600; margin:2.2rem 0 .7rem;}
.privacy-content p,.privacy-content li{color:var(--ink-soft); font-size:.94rem;}
.privacy-content ul{margin:0 0 1.2rem 1.3rem;}

/* 旧クラス名のボタンを新しい見た目に合わせる */
.btn-primary{background:var(--rose-deep); color:#fff;}
.btn-primary:hover{background:#8a4749;}
.btn-outline{border:1.5px solid var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper);}

@media(max-width:768px){
  .img-2col,.img-3col{grid-template-columns:1fr;}
  .detail-title{font-size:1.2rem;}
  .section{padding:3.5rem 0;}
}