@charset "utf-8";
/* ============================================================
   Nuage nail & eyelash ／ ニュアージュ
   ネイル・まつ毛サロン（1ページ型）
   ============================================================ */

:root{
  --rose:#C67878;
  --rose-2:#DBB3B3;
  --rose-3:#E3C2C2;
  --rose-4:#EBCFCF;
  --mist:#F4E7E7;
  --gray-bg:#F9F9F9;
  --butter:#F7F1AD;
  --wine:#A6494F;
  --gold:#C6B27B;
  --ink:#333;
  --line:#555;
  --f-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-geo:"Jost","Century Gothic",sans-serif;
  --f-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:clip;}
body{
  margin:0;min-width:320px;background:#fff;color:var(--ink);
  font-family:var(--f-jp);font-size:13px;line-height:2;letter-spacing:.15em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
h1,h2,h3,h4,p,figure,dl,dd{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
table{border-collapse:collapse;}

/* ---------- 共通 ---------- */
.sec{margin-top:150px;margin-left:115px;margin-right:115px;}
.sec-ttl{font-family:var(--f-cond);font-weight:700;font-size:39px;line-height:1.1;letter-spacing:.3em;}
.jp-tx{font-family:var(--f-jp);}
.en-tx{font-family:var(--f-geo);}
.uline{position:relative;display:inline-block;padding-bottom:5px;}
.uline::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:1px;background:var(--line);}

/* 角の鉤マークつきボタン（白／ホバーでバター色） */
.btn-kagi{
  display:block;height:50px;line-height:50px;text-align:center;
  font-family:var(--f-geo);font-size:13px;letter-spacing:.2em;
  transition:background-color .3s;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/7px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 0/1px 7px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/7px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/1px 7px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100%/7px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100%/1px 7px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 100%/7px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 7px no-repeat,
    #fff;
}
.btn-kagi:hover{background-color:var(--butter);}

/* 先頭に短い横線がつくテキストリンク */
.btn-dash{position:relative;display:inline-block;padding-left:35px;font-family:var(--f-geo);letter-spacing:.2em;}
.btn-dash::before{content:"";position:absolute;left:0;top:.9em;width:20px;height:1px;background:var(--line);transition:width .3s;}
a:hover .btn-dash::before,.btn-dash:hover::before{width:32px;}

/* 出現アニメーション */
.zin{opacity:0;}
.zin.is-in{opacity:1;animation:zin .45s ease both;}
@keyframes zin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ============================================================
   ヘッダー
   ============================================================ */
.logo-box{
  position:fixed;top:30px;right:120px;z-index:10;width:130px;height:130px;
  border:1px solid var(--ink);border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.logo-box .en{display:block;font-family:var(--f-cond);font-weight:700;font-size:20px;line-height:1;letter-spacing:.3em;margin-right:-.3em;color:var(--ink);}
.logo-box .jp{display:block;margin-top:8px;font-size:9px;line-height:1;letter-spacing:.3em;margin-right:-.3em;color:var(--rose);}

.burger{position:fixed;top:50px;right:50px;z-index:10000;width:60px;height:60px;border:1px solid var(--ink);border-radius:9999px;background:#fff;transition:background-color .4s;}
.burger span{position:absolute;left:20px;top:calc(50% - .5px);width:20px;height:1px;background:var(--ink);transition:all .2s;transform-origin:center;}
.burger span:nth-child(1){transform:translateY(-7px);}
.burger span:nth-child(3){transform:translateY(7px);}
.burger.is-act span:nth-child(1){transform:rotate(-45deg);}
.burger.is-act span:nth-child(2){transform:translateX(60px);opacity:0;}
.burger.is-act span:nth-child(3){transform:rotate(45deg);}

.gnav{
  position:fixed;top:0;right:0;z-index:9999;width:40%;height:100vh;
  padding:120px 50px 50px;background:rgba(227,194,194,.9);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
.gnav.is-open{opacity:1;visibility:visible;}
.gnav li{font-family:var(--f-cond);font-weight:600;font-size:26px;line-height:1.9;letter-spacing:.2em;}
.gnav li:first-child{color:var(--wine);}
.gnav li a{position:relative;display:table;}
.gnav li a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--ink);transition:width .2s;}
.gnav li a:hover::after{width:100%;}
.gnav .sns{margin:60px 0 70px;display:flex;gap:20px;}
.gnav .sns a{font-family:var(--f-cond);font-weight:600;font-size:11px;letter-spacing:.2em;display:flex;align-items:center;gap:7px;}
.gnav .sns svg{width:15px;height:15px;fill:var(--ink);}
.gnav .info{font-size:11px;line-height:2.2;letter-spacing:.12em;}

/* ============================================================
   ヒーロー
   ============================================================ */
.hero{position:relative;width:66%;height:800px;margin:0 auto 0 100px;}
.hero .slides{position:absolute;inset:0;overflow:hidden;}
.hero .slides li{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity 1.4s ease;}
.hero .slides li.is-on{opacity:1;animation:kenburns 6.4s ease-out both;}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero .dots{position:absolute;top:46%;right:25px;z-index:3;}
.hero .dots button{display:block;width:10px;height:10px;margin:10px 0;border:1px solid #fff;border-radius:50%;transition:background-color .2s;}
.hero .dots button.is-on{background:#fff;}

.hero-copy{position:absolute;top:185px;right:-210px;z-index:4;display:flex;align-items:flex-start;gap:26px;}
.hero-copy .ttl{display:flex;flex-direction:column;font-family:var(--f-cond);font-weight:700;font-size:68px;line-height:1.12;letter-spacing:0;}
.hero-copy .ttl span{
  display:block;text-align:center;color:transparent;
  -webkit-text-stroke:1px var(--gold);
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease,transform .8s ease,color 1.1s ease .9s;
}
body.is-ready .hero-copy .ttl span{opacity:1;transform:none;color:var(--gold);}
body.is-ready .hero-copy .ttl span:nth-child(2){transition-delay:.1s,.1s,1s;}
body.is-ready .hero-copy .ttl span:nth-child(3){transition-delay:.2s,.2s,1.1s;}
body.is-ready .hero-copy .ttl span:nth-child(4){transition-delay:.3s,.3s,1.2s;}
body.is-ready .hero-copy .ttl span:nth-child(5){transition-delay:.4s,.4s,1.3s;}
.hero-copy .sub{margin:6px 0 0;writing-mode:vertical-rl;font-family:var(--f-geo);font-weight:500;font-size:14px;letter-spacing:.42em;opacity:0;transition:opacity .8s ease .5s;}
body.is-ready .hero-copy .sub{opacity:1;}

.hero-sub{position:absolute;top:610px;right:-210px;z-index:4;}
.hero-sub ul{opacity:0;transition:opacity .6s ease 1s;}
.hero-sub li{position:relative;padding-left:32px;font-family:var(--f-geo);font-size:13px;line-height:2.7;letter-spacing:.32em;}
.hero-sub li::before{content:"";position:absolute;left:0;top:calc(50% - .5px);width:18px;height:1px;background:var(--line);}
body.is-ready .hero-sub ul{opacity:1;}

.scroll-cue{position:absolute;left:-65px;bottom:0;z-index:4;opacity:0;transition:opacity .6s ease 1.3s;}
body.is-ready .scroll-cue{opacity:1;}
.scroll-cue .tx{writing-mode:vertical-rl;font-family:var(--f-geo);font-size:14px;letter-spacing:.2em;padding-bottom:30px;animation:cue 2s ease-out infinite;}
.scroll-cue .tx::after{content:"";position:absolute;left:calc(50% - 2px);bottom:0;width:5px;height:13px;background:linear-gradient(var(--ink),var(--ink)) center/1px 13px no-repeat;}
@keyframes cue{0%{opacity:1}50%{opacity:.2}100%{opacity:1}}
.hero-line{position:absolute;right:-45px;bottom:-120px;width:1px;height:180px;background:var(--rose);}

/* ============================================================
   CONCEPT
   ============================================================ */
.concept{display:flex;flex-direction:row-reverse;align-items:center;}
.concept .ph{width:41.6%;flex-shrink:0;position:relative;z-index:2;}
.concept .ph img{width:100%;aspect-ratio:5/6;object-fit:cover;}
.concept .box{width:58.4%;margin-right:-60px;padding:50px 110px 50px 50px;background:var(--mist);}
.concept .box .en{margin-top:30px;font-family:var(--f-geo);font-size:12px;line-height:2.2;letter-spacing:.12em;color:var(--line);}
.concept .box .jp{margin-top:40px;}
.concept .box .btn-wrap{margin-top:40px;width:58%;}

/* ============================================================
   MENU（3枚のカード）
   ============================================================ */
.menu-wrap{display:flex;align-items:flex-start;gap:40px;}
.menu-wrap > .head{width:33.3%;flex-shrink:0;}
.menu-wrap > .list{flex:1;display:flex;gap:55px;}
.menu-wrap > .list > li{width:33.3%;}
.menu-wrap > .list > li:nth-child(2){margin-top:55px;}
.menu-wrap > .list > li:nth-child(3){margin-top:110px;}
.menu-card .ph{width:100%;aspect-ratio:4/5;overflow:hidden;}
.menu-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease;}
.menu-card:hover .ph img{transform:scale(1.06);}
.menu-card .tx{margin-top:25px;}
.menu-card .tx .en{font-family:var(--f-cond);font-weight:700;font-size:21px;line-height:1;letter-spacing:.3em;}
.menu-card .tx .min{margin-top:5px;font-family:var(--f-geo);font-size:14px;letter-spacing:.1em;}
.menu-card .tx .desc{margin-top:10px;font-size:12px;line-height:1.9;}
.menu-card .btn-wrap{margin-top:35px;}

/* ============================================================
   ギャラリー（横に流れる2列）
   ============================================================ */
.insta{display:flex;align-items:center;gap:0;margin-top:150px;}
.insta > .head{width:41.6%;flex-shrink:0;padding:0 80px;order:1;}
.insta > .head .links{margin-top:15px;display:flex;flex-direction:column;gap:15px;align-items:flex-start;}
.insta > .strips{width:58.4%;order:2;overflow:hidden;}
.strip{overflow:hidden;}
.strip + .strip{margin-top:12px;}
.strip .row{display:flex;width:max-content;animation:flowR 52s linear infinite;}
.strip.-rev .row{animation-name:flowL;animation-duration:44s;}
.strip .row img{width:200px;height:200px;object-fit:cover;margin-right:12px;}
.strip.-rev .row img{width:150px;height:150px;}
@keyframes flowL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes flowR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ============================================================
   MENU & PRICE
   ============================================================ */
.price-panel{background:var(--mist);padding:80px 0;}
.price-panel .inner{padding:0 20px;}
.price-cols{display:flex;justify-content:center;gap:50px;margin-top:40px;}
.price-cols > section{width:41.6%;}
.price-cols h4{font-family:var(--f-cond);font-weight:700;font-size:21px;letter-spacing:.4em;}
.price{width:100%;margin-top:25px;}
.price th{font-weight:400;text-align:left;padding:8px 30px 8px 0;font-size:13px;}
.price td{font-family:var(--f-geo);text-align:right;padding:8px 0;white-space:nowrap;}
.price th,.price td{border-bottom:1px dashed #d9bfbf;}
.price-note{margin-top:70px;text-align:center;font-size:12px;color:#666;}
.price-cv{margin:70px auto 0;max-width:820px;border:1px solid var(--ink);padding-bottom:40px;}
.price-cv .cap{margin-top:-1.1em;padding:0 30px;text-align:center;}
.price-cv .cap span{background:var(--mist);padding:0 20px;}
.price-cv .btns{display:flex;justify-content:center;gap:50px;margin-top:45px;padding:0 40px;}
.price-cv .btns > *{width:41.6%;}

/* ============================================================
   ギャラリー（正方形グリッド＋ホバーマスク）
   ============================================================ */
.grid-sq{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:30px;}
.grid-sq .cell{position:relative;display:block;overflow:hidden;}
.grid-sq img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s ease;}
.grid-sq .cell:hover img{transform:scale(1.05);}
.grid-sq .mask{
  position:absolute;inset:0;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#fff;text-align:center;opacity:0;transition:opacity .5s ease;
  background:rgba(198,120,120,.55);
}
.grid-sq .cell:hover .mask{opacity:1;}
.grid-sq .mask .n{font-family:var(--f-cond);font-weight:700;font-size:17px;letter-spacing:.2em;line-height:1.2;}
.grid-sq .mask .s{font-family:var(--f-geo);font-size:11px;letter-spacing:.2em;}

/* ============================================================
   COLUMN（3枚）
   ============================================================ */
.cols3{display:flex;gap:45px;margin-top:30px;}
.cols3 > article{width:33.3%;}
.cols3 img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.cols3 h4{margin-top:12px;font-weight:700;font-size:17px;letter-spacing:.2em;line-height:1.6;}
.cols3 .en{display:inline-block;position:relative;z-index:2;margin-top:-16px;padding:0 16px 0 0;background:#fff;font-family:var(--f-cond);font-weight:700;font-size:30px;line-height:1;letter-spacing:.2em;color:var(--gold);}
.cols3 p.tx{padding-top:20px;font-size:12px;line-height:1.95;}
.cols3 .more{margin-top:30px;}

/* ============================================================
   SALON INFO
   ============================================================ */
.info-wrap{display:flex;flex-direction:row-reverse;gap:60px;align-items:flex-start;margin-top:30px;}
.info-wrap .ph{width:41.6%;flex-shrink:0;}
.info-wrap .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.info-tbl{width:100%;}
.info-tbl th,.info-tbl td{text-align:left;vertical-align:top;padding:14px 0;border-bottom:1px solid #e4e4e4;font-size:13px;line-height:1.9;}
.info-tbl th{width:130px;font-weight:400;font-family:var(--f-cond);font-size:15px;letter-spacing:.2em;color:var(--rose);}

/* ============================================================
   フッター
   ============================================================ */
.site-foot{margin-top:150px;}
.foot-bar{background:var(--gray-bg);padding:15px 100px;font-family:var(--f-geo);font-size:12px;letter-spacing:.18em;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.foot-bar .links li{display:inline-block;position:relative;padding:0 20px 0 10px;}
.foot-bar .links li::before{content:"/";position:absolute;right:0;top:0;}
.foot-bar .links li:last-child::before{display:none;}
.foot-end{padding:50px 100px 90px;text-align:center;}
.foot-end .mark{font-family:var(--f-cond);font-weight:700;font-size:26px;letter-spacing:.32em;}
.foot-end .note{margin-top:22px;font-size:11px;line-height:1.9;color:#888;}
.foot-end .copy{margin-top:22px;font-family:var(--f-geo);font-size:11px;letter-spacing:.2em;color:#888;}

/* 追従CVバー */
.cv-bar{position:fixed;left:0;bottom:0;z-index:9000;width:100%;height:50px;display:flex;color:#fff;font-weight:700;background:var(--rose-3);transform:translateY(calc(100% + 20px));transition:transform .3s;}
.cv-bar.is-on{transform:none;}
.cv-bar .ttl{width:35%;text-align:center;line-height:50px;letter-spacing:.25em;font-size:12px;}
.cv-bar ul{width:65%;display:flex;}
.cv-bar li{flex:1 0 50%;border-left:1px solid #fff;background:var(--rose-2);transition:background-color .4s;}
.cv-bar li:hover{background:var(--rose-4);}
.cv-bar li a{display:block;height:50px;line-height:50px;padding-left:60px;font-family:var(--f-geo);font-size:14px;letter-spacing:.2em;position:relative;}
.cv-bar li a::before{content:"";position:absolute;left:40px;top:calc(50% - 5px);width:6px;height:10px;background:linear-gradient(#fff,#fff) no-repeat;clip-path:polygon(0 0,100% 50%,0 100%);}

/* ============================================================
   タブレット・スマートフォン
   ============================================================ */
@media (max-width:1300px){
  .hero{width:60%;height:690px;}
  .hero-copy{top:150px;}
  .hero-copy .ttl{font-size:60px;}
  .hero-sub{top:545px;}
}
@media (max-width:1200px){
  .menu-wrap{flex-direction:column;}
  .menu-wrap > .head{width:100%;}
  .menu-wrap > .list{width:100%;gap:40px;}
}
@media (max-width:999px){
  .sec{margin-top:120px;margin-left:50px;margin-right:50px;}
  .sec-ttl{font-size:33px;}
  .logo-box{top:16px;right:92px;width:104px;height:104px;}
  .logo-box .en{font-size:17px;}
  .logo-box .jp{font-size:8px;}
  .burger{top:20px;right:20px;}
  .gnav{width:100%;padding:50px;}
  .gnav li{text-align:center;}
  .gnav li a{display:block;}
  .gnav .sns{justify-content:center;margin:30px 0 50px;}
  .gnav .info{text-align:center;}
  .hero{height:510px;margin:0 auto 0 50px;}
  .hero-copy{top:130px;right:-185px;gap:18px;}
  .hero-copy .ttl{font-size:48px;}
  .hero-copy .sub{font-size:12px;}
  .hero-sub{top:425px;right:-185px;}
  .hero-sub li{font-size:12px;line-height:2.5;padding-left:26px;}
  .hero-sub li::before{width:15px;}
  .scroll-cue{left:-37px;}
  .concept{flex-direction:column;align-items:stretch;}
  .concept .ph{width:100%;}
  .concept .ph img{aspect-ratio:16/9;}
  .concept .box{width:100%;margin-right:0;padding:40px 30px;}
  .concept .box .btn-wrap{width:100%;}
  .insta{flex-direction:column;gap:24px;}
  .insta > .head{width:100%;padding:0;order:1;text-align:center;}
  .insta > .head .links{align-items:center;}
  .insta > .strips{width:100%;order:2;}
  .strip .row img{width:150px;height:150px;}
  .strip.-rev .row img{width:120px;height:120px;}
  .price-cols{flex-direction:column;align-items:center;gap:0;}
  .price-cols > section{width:100%;max-width:520px;margin-top:40px;}
  .price-cv .btns{flex-direction:column;align-items:center;gap:20px;}
  .price-cv .btns > *{width:100%;max-width:420px;}
  .grid-sq{grid-template-columns:repeat(3,1fr);gap:16px;}
  .cols3{flex-wrap:wrap;gap:30px;}
  .cols3 > article{width:calc(50% - 15px);}
  .info-wrap{flex-direction:column;gap:30px;}
  .info-wrap .ph{width:100%;}
  .foot-bar{padding:15px 30px;justify-content:center;text-align:center;}
  .foot-end{padding:40px 30px 90px;}
}
@media (max-width:767px){
  .sec{margin-top:100px;margin-left:30px;margin-right:30px;}
  .sec-ttl{font-size:31px;letter-spacing:.24em;}
  .logo-box{top:12px;right:70px;width:88px;height:88px;}
  .logo-box .en{font-size:15px;letter-spacing:.26em;margin-right:-.26em;}
  .logo-box .jp{font-size:8px;}
  .burger{top:14px;right:14px;width:48px;height:48px;}
  .burger span{left:14px;}
  .gnav{padding:100px 30px 40px;}
  .gnav li{font-size:22px;}
  /* SPは余白が足りずコピーが写真に重なって読めないため、
     写真の下へ落として白地に置く（PC/タブレットの重ね配置は維持） */
  .hero{width:calc(100% - 30px);height:330px;margin:0 auto 0 0;}
  .hero-copy{top:calc(100% + 24px);right:30px;display:block;text-align:right;}
  .hero-copy .ttl{flex-direction:row;justify-content:flex-end;font-size:min(44px,11vw);line-height:1.05;letter-spacing:.2em;}
  .hero-copy .sub{writing-mode:horizontal-tb;margin-top:8px;font-size:12px;letter-spacing:.2em;}
  .hero-sub{top:calc(100% + 112px);right:30px;}
  .hero-sub ul{display:flex;gap:24px;justify-content:flex-end;}
  .hero-sub li{font-size:11px;line-height:1.6;letter-spacing:.2em;padding-left:18px;}
  .hero-sub li::before{width:12px;}
  .scroll-cue{left:8px;bottom:8px;color:#fff;}
  .scroll-cue .tx::after{background:linear-gradient(#fff,#fff) center/1px 13px no-repeat;}
  .hero-line{display:none;}
  .hero + .sec{margin-top:190px;}
  .strip .row img{width:120px;height:120px;}
  .strip.-rev .row img{width:100px;height:100px;}
  .menu-wrap > .list > li:nth-child(2){margin-top:28px;}
  .menu-wrap > .list > li:nth-child(3){margin-top:56px;}
  .grid-sq{grid-template-columns:repeat(2,1fr);gap:12px;}
  .grid-sq .mask .n{font-size:14px;}
  .cols3 > article{width:100%;}
  .price-panel{padding:50px 0;}
  .price-note{margin-top:40px;text-align:left;}
  .price-cv{margin-top:40px;}
  .foot-bar{padding:14px 20px;font-size:11px;}
  .cv-bar .ttl{width:32%;font-size:10px;letter-spacing:.1em;}
  .cv-bar ul{width:68%;}
  .cv-bar li a{padding-left:34px;font-size:12px;}
  .cv-bar li a::before{left:18px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .zin{opacity:1;}
  .hero-copy .ttl span{opacity:1;transform:none;color:var(--gold);}
  .hero-copy .sub,.hero-sub ul,.scroll-cue{opacity:1;}
}

/* 掲載内容が架空であることの注記（デモ用） */
.demo-note{
  margin:0 0 10px;
  font-size:12px;
  line-height:1.8;
  text-align:center;
  color:inherit;
  opacity:.72;
}