/* 花と季 ハナトキ｜PC はカンプ PC（1440）の座標、SP はカンプ SP（390）から組む。1023px で切り替え */
:root{
  --bg:#F6F6F3; --bg2:#EDECE6; --ink:#333333; --head:#2A2A28; --green:#C8361D; --deep:#B02A14; --hoverDeep:#9A220F;
  --rule:#8E8D86; --rule2:#BDBCB4; --onDeep:#F6F6F3;
  --u:calc(min(100vw,1440px)/1440);
  --ja:"Murecho",sans-serif; --num:"Jost","Murecho",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ja);font-weight:400;
  font-feature-settings:"palt" 0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
ul,ol,dl,dd,p,h1,h2,h3{margin:0;padding:0;list-style:none}
.num{font-family:var(--num);font-weight:400;letter-spacing:.02em}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
picture{display:block;width:100%;height:100%}
br.pc{display:none}

/* ===== PC ===== */
@media (min-width:1024px){
  body{max-width:1440px;margin:0 auto}
  br.pc{display:inline}
  .menu-btn{display:none}
  section,.hd,.ft,.strip{position:relative}
  .hd{height:0;z-index:5}
  .logo{position:absolute;left:calc(50*var(--u));top:calc(40*var(--u));display:flex;align-items:center;gap:calc(11*var(--u));
    font-size:calc(19*var(--u));font-weight:700;letter-spacing:.06em;text-decoration:none;color:var(--head);line-height:1}
  .logo-sq{width:calc(22*var(--u));height:calc(22*var(--u));background:var(--green);flex:none}
  .gnav ul{position:absolute;right:calc(52*var(--u));top:calc(43*var(--u));display:flex;gap:calc(32*var(--u))}
  .gnav li{line-height:calc(19*var(--u))}
  .gnav a{display:block;font-size:calc(15*var(--u));letter-spacing:.04em;line-height:calc(19*var(--u));
    text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .2s ease}
  .gnav a:hover{text-decoration-color:currentColor}

  .h2{font-size:calc(34*var(--u));line-height:calc(52*var(--u));font-weight:700;color:var(--head);letter-spacing:.03em}
  p,dd,dt,li{font-size:calc(17*var(--u));line-height:calc(31*var(--u));letter-spacing:.04em}

  /* 曜日の丸 */
  .days{display:flex;gap:calc(13*var(--u))}
  .days li{width:calc(34*var(--u));height:calc(34*var(--u));border:1px solid #8a8a84;border-radius:50%;
    display:grid;place-items:center;font-size:calc(14*var(--u));line-height:1;color:#555}
  .days li.on{background:var(--green);border-color:var(--green);color:var(--onDeep)}

  /* 1 FV */
  .s1{height:calc(1160*var(--u))}
  .s1-lead{position:absolute;left:calc(50*var(--u));top:calc(131*var(--u));font-size:calc(18*var(--u));line-height:calc(35*var(--u))}
  .s1-info{position:absolute;left:calc(50*var(--u));top:calc(214*var(--u));display:flex;align-items:center;gap:calc(32*var(--u))}
  .s1-hours{font-size:calc(14*var(--u));display:flex;gap:calc(22*var(--u))}
  .s1-photo{position:absolute;left:0;top:calc(354*var(--u));width:100%;height:calc(806*var(--u))}
  .s1-title{position:absolute;right:calc(64*var(--u));top:calc(130*var(--u));writing-mode:vertical-rl;
    font-size:calc(46*var(--u));line-height:calc(66*var(--u));letter-spacing:calc(3*var(--u));font-weight:500;color:var(--head);white-space:nowrap}

  /* 2 今週の花 */
  .s2{height:calc(1076*var(--u))}
  .s2-title{position:absolute;left:calc(55*var(--u));top:calc(136*var(--u))}
  .s2-days{position:absolute;left:calc(55*var(--u));top:calc(276*var(--u));gap:calc(15*var(--u))}
  .s2-days li{width:calc(37*var(--u));height:calc(37*var(--u));font-size:calc(15*var(--u))}
  .s2-note{position:absolute;left:calc(55*var(--u));top:calc(336*var(--u));font-size:calc(16*var(--u))}
  .s2-photo{position:absolute;left:calc(55*var(--u));top:calc(407*var(--u));width:calc(442*var(--u));height:calc(585*var(--u))}
  .s2-list{position:absolute;left:calc(565*var(--u));top:calc(130*var(--u));width:calc(820*var(--u));border-top:2px solid var(--rule)}
  .s2-list li{position:relative;height:calc(221*var(--u));border-bottom:2px solid var(--rule)}
  .s2-list img{position:absolute;left:0;top:calc(25*var(--u));width:calc(205*var(--u));height:calc(170*var(--u))}
  .s2-list .n{position:absolute;left:calc(235*var(--u));top:calc(92*var(--u));font-size:calc(27*var(--u));line-height:calc(38*var(--u));font-weight:700;color:var(--head);letter-spacing:.04em}
  .s2-list .k{position:absolute;left:calc(449*var(--u));top:calc(98*var(--u));font-size:calc(17*var(--u));line-height:calc(26*var(--u))}
  .s2-list .p{position:absolute;right:0;top:calc(92*var(--u));font-size:calc(26*var(--u));line-height:calc(38*var(--u))}

  /* 3 花束 */
  .s3{height:calc(816*var(--u))}
  .s3-ph{position:absolute;width:calc(350*var(--u))}
  .s3-ph.a{left:0;top:calc(92*var(--u));height:calc(296*var(--u))}
  .s3-ph.b{left:calc(358*var(--u));top:calc(92*var(--u));height:calc(296*var(--u))}
  .s3-ph.c{left:0;top:calc(448*var(--u));height:calc(293*var(--u))}
  .s3-ph.d{left:calc(358*var(--u));top:calc(448*var(--u));height:calc(293*var(--u))}
  .s3-title{position:absolute;left:calc(889*var(--u));top:calc(94*var(--u))}
  .s3-body{position:absolute;left:calc(891*var(--u));top:calc(218*var(--u));width:calc(516*var(--u))}
  .s3-menu{position:absolute;left:calc(889*var(--u));top:calc(345*var(--u));width:calc(518*var(--u))}
  .s3-menu div{display:flex;justify-content:space-between;align-items:center;height:calc(68*var(--u));border-bottom:2px solid var(--rule2)}
  .s3-menu dt,.s3-menu dd{font-size:calc(18*var(--u))}
  .s3-link{position:absolute;left:calc(889*var(--u));top:calc(648*var(--u))}
  .tlink{font-size:calc(17*var(--u));line-height:calc(28*var(--u));color:var(--green);text-decoration:none;letter-spacing:.04em;
    border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
  .tlink:hover{color:var(--hoverDeep)}

  /* 4 写真の帯 */
  .s4{height:calc(875*var(--u))}
  .s4-small{position:absolute;left:calc(51*var(--u));top:calc(151*var(--u));width:calc(329*var(--u));height:calc(389*var(--u))}
  .s4-text{position:absolute;left:calc(50*var(--u));top:calc(580*var(--u))}
  .s4-big{position:absolute;left:calc(440*var(--u));top:calc(151*var(--u));width:calc(1000*var(--u));height:calc(573*var(--u))}

  /* 5 頼み方 */
  .s5{height:calc(1125*var(--u));background:var(--deep);color:var(--onDeep)}
  .s5 .h2,.s5 h3{color:var(--onDeep)}
  .s5-title{position:absolute;left:calc(50*var(--u));top:calc(103*var(--u))}
  .s5-intro{position:absolute;left:calc(986*var(--u));top:calc(138*var(--u))}
  .s5-item{position:absolute}
  .s5-item picture{height:auto;aspect-ratio:var(--ar)}
  .s5-item h3{font-size:calc(30*var(--u));line-height:calc(42*var(--u));font-weight:700;letter-spacing:.04em;margin-top:calc(26*var(--u))}
  .s5-item p{margin-top:calc(10*var(--u));font-weight:500;letter-spacing:.02em}
  .s5-item .tlink{display:inline-block;margin-top:calc(14*var(--u));color:var(--onDeep);font-size:calc(16*var(--u))}
  .s5-item .tlink:hover{color:#F7DDD6}
  .s5-item.i1{left:calc(50*var(--u));top:calc(263*var(--u));width:calc(520*var(--u));--ar:520/561}
  .s5-item.i2{left:calc(600*var(--u));top:calc(383*var(--u));width:calc(380*var(--u));--ar:380/401}
  .s5-item.i3{left:calc(1009*var(--u));top:calc(322*var(--u));width:calc(381*var(--u));--ar:381/401}

  /* 6 一言 */
  .s6{height:calc(804*var(--u))}
  .s6-photo{position:absolute;inset:0}
  .s6-title{position:absolute;left:calc(53*var(--u));top:calc(100*var(--u));font-size:calc(37*var(--u));line-height:calc(50*var(--u));font-weight:700;color:var(--head);letter-spacing:.03em}
  .s6-sub{position:absolute;left:calc(53*var(--u));top:calc(222*var(--u));font-size:calc(16*var(--u))}

  /* 7 店の案内 */
  .s7{height:calc(1260*var(--u))}
  .s7-title{position:absolute;left:calc(48*var(--u));top:calc(122*var(--u))}
  .s7-table{position:absolute;left:calc(50*var(--u));top:calc(254*var(--u));width:calc(560*var(--u))}
  .s7-table div{display:flex;min-height:calc(74*var(--u));padding-top:calc(23*var(--u));border-top:2px solid #A9A794}
  .s7-table div:last-child{padding-bottom:0}
  .s7-table dt{width:calc(150*var(--u));flex:none;font-weight:700;color:var(--head)}
  .s7-table dd{flex:1}
  .s7-note{position:absolute;left:calc(50*var(--u));top:calc(904*var(--u));font-size:calc(16*var(--u))}
  .s7-small{position:absolute;left:calc(51*var(--u));top:calc(967*var(--u));width:calc(399*var(--u));height:calc(259*var(--u))}
  .s7-big{position:absolute;left:calc(720*var(--u));top:calc(120*var(--u));width:calc(720*var(--u));height:calc(1020*var(--u))}

  /* 8 予約 */
  .s8{height:calc(704*var(--u))}
  .s8-photo{position:absolute;left:0;top:calc(72*var(--u));width:calc(720*var(--u));height:calc(559*var(--u))}
  .s8-title{position:absolute;left:calc(828*var(--u));top:calc(150*var(--u))}
  .s8-body{position:absolute;left:calc(830*var(--u));top:calc(266*var(--u))}
  .s8-list{position:absolute;left:calc(830*var(--u));top:calc(321*var(--u));width:calc(560*var(--u))}
  .s8-list div{display:flex;height:calc(61*var(--u));align-items:center;border-top:2px solid var(--rule2)}
  .s8-list div:last-child{border-bottom:0}
  .s8-list dt{width:calc(130*var(--u));font-weight:500;color:var(--head)}
  .btn{position:absolute;display:flex;align-items:center;justify-content:center;background:var(--green);color:var(--onDeep);
    text-decoration:none;font-weight:700;letter-spacing:.06em;transition:background-color .2s ease,transform .15s ease}
  .btn:hover{background:var(--hoverDeep)}
  .btn:active{transform:translateY(1px)}
  .s8-btn{left:calc(830*var(--u));top:calc(483*var(--u));width:calc(262*var(--u));height:calc(70*var(--u));font-size:calc(18*var(--u))}

  .strip{display:flex;gap:calc(3*var(--u));height:calc(279*var(--u))}
  .strip picture{flex:1;min-width:0}

  .ft{height:calc(326*var(--u))}
  .ft-logo{top:calc(84*var(--u));font-size:calc(25*var(--u));gap:calc(12*var(--u))}
  .ft-logo .logo-sq{width:calc(28*var(--u));height:calc(28*var(--u))}
  .ft-demo{position:absolute;left:calc(50*var(--u));top:calc(145*var(--u));font-size:calc(15*var(--u))}
  .ft-nav{position:absolute;left:calc(610*var(--u));top:calc(70*var(--u))}
  .ft-nav li{font-size:calc(16*var(--u));line-height:calc(41*var(--u))}
  .ft-nav a{text-decoration:none}
  .ft-nav a:hover{text-decoration:underline}
  .ft-info{position:absolute;left:calc(1049*var(--u));top:calc(79*var(--u))}
  .ft-info li{font-size:calc(16*var(--u));line-height:calc(33*var(--u))}
}

/* ===== SP（カンプ SP 390 から。幅は 390 を基準に vw で伸び縮み） ===== */
@media (max-width:1023px){
  :root{--s:calc(100vw/390)}
  body{font-size:15px}
  .hd{position:relative;height:62px}
  .logo{position:absolute;left:20px;top:15px;min-height:32px;display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;letter-spacing:.06em;text-decoration:none;color:var(--head);line-height:1}
  .logo-sq{width:16px;height:16px;background:var(--green);flex:none}
  .menu-btn{position:absolute;right:20px;top:9px;height:44px;width:82px;border:1px solid #8a8a84;background:transparent;font:inherit;font-size:13px;letter-spacing:.06em;color:var(--ink);cursor:pointer;transition:background-color .2s ease}
  .menu-btn[aria-expanded="true"]{background:var(--bg2)}
  .gnav{position:absolute;left:0;right:0;top:62px;z-index:10;background:var(--bg);border-bottom:1px solid var(--rule2);
    opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
  .gnav.open{opacity:1;transform:none;visibility:visible;transition:opacity .2s ease,transform .2s ease}
  .gnav li{border-top:1px solid var(--rule2)}
  .gnav a{display:flex;align-items:center;min-height:52px;padding:0 20px;text-decoration:none;font-size:16px}

  .h2{font-size:24px;line-height:1.6;font-weight:700;color:var(--head);letter-spacing:.03em}
  p,dd,dt,li{font-size:14px;line-height:2;letter-spacing:.04em}
  .days{display:flex;gap:9px}
  .days li{width:30px;height:30px;border:1px solid #8a8a84;border-radius:50%;display:grid;place-items:center;font-size:12.5px;line-height:1;color:#555}
  .days li.on{background:var(--green);border-color:var(--green);color:var(--onDeep)}
  .tlink{display:inline-block;line-height:24px;color:var(--green);text-decoration:none;border-bottom:1px solid currentColor;font-size:14px;padding-bottom:2px}

  /* 1 FV：写真は左 282・縦組みは右 */
  .s1{position:relative;display:grid;grid-template-columns:282fr 108fr;padding:10px 0 40px}
  .s1-photo{grid-column:1;grid-row:1;aspect-ratio:282/439}
  .s1-title{grid-column:2;grid-row:1;justify-self:center;writing-mode:vertical-rl;font-size:calc(29*var(--s));line-height:calc(48*var(--s));letter-spacing:calc(2.5*var(--s));font-weight:500;color:var(--head);white-space:nowrap;margin-top:-2px}
  .s1-lead{grid-column:1/-1;margin:34px 20px 0;font-size:15.5px;line-height:2.05}
  .s1-info{grid-column:1/-1;margin:14px 20px 0}
  .s1-hours{margin-top:16px;font-size:14px;display:flex;gap:16px}
  .s1-hours .num{font-size:14px}

  /* 2 今週の花 */
  .s2{padding:60px 20px 40px}
  .s2-title{font-size:25px}
  .s2-days,.s2-photo{display:none}
  .s2-note{font-size:13px;margin-top:8px}
  .s2-list{margin-top:24px;border-top:2px solid var(--rule2)}
  .s2-list li{display:grid;grid-template-columns:96px 1fr auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:14px 0;border-bottom:2px solid var(--rule2);min-height:125px}
  .s2-list img{grid-row:1/3;width:96px;height:96px}
  .s2-list .n{grid-column:2;align-self:end;font-size:17px;font-weight:700;color:var(--head);line-height:1.5}
  .s2-list .k{grid-column:2;align-self:start;font-size:13px;line-height:1.7}
  .s2-list .p{grid-column:3;grid-row:1/3;font-size:16px}

  /* 3 花束 */
  .s3{display:grid;grid-template-columns:1fr 1fr;column-gap:7px;padding:63px 0 4px}
  .s3-ph{aspect-ratio:191/220}
  .s3-ph.c,.s3-ph.d{display:none}
  .s3-title,.s3-body,.s3-menu,.s3-link{grid-column:1/-1;margin-left:20px;margin-right:20px}
  .s3-title{margin-top:38px}
  .s3-body{margin-top:14px}
  .s3-menu{margin-top:34px}
  .s3-menu div{display:flex;justify-content:space-between;align-items:center;min-height:65px;border-bottom:1px solid var(--rule)}
  .s3-menu dt,.s3-menu dd{font-size:15px}
  .s3-link{justify-self:start;margin-top:22px}

  /* 4 写真の帯 */
  .s4{padding:55px 0 62px}
  .s4-small{display:none}
  .s4-big{aspect-ratio:390/242}
  .s4-text{margin:24px 20px 0;font-size:15px;line-height:2.4}

  /* 5 頼み方 */
  .s5{background:var(--deep);color:var(--onDeep);padding:80px 18px 100px;display:flex;flex-direction:column}
  .s5 .h2,.s5 h3{color:var(--onDeep)}
  .s5-title{font-size:24.5px;line-height:1.55}
  .s5-intro{margin-top:14px;font-size:14.5px;line-height:1.95}
  .s5-item{margin-top:70px}
  .s5-item.i1{margin-top:40px}
  .s5-item picture{height:auto}
  .s5-item.i1 picture{aspect-ratio:354/305}
  .s5-item.i2 picture{width:82.5%;margin-left:auto;aspect-ratio:292/241}
  .s5-item.i3 picture{width:82.8%;aspect-ratio:293/241}
  .s5-item h3{font-size:22px;line-height:1.5;font-weight:700;margin-top:22px}
  .s5-item p{margin-top:8px;font-weight:500}
  .s5-item .tlink{display:inline-block;margin-top:12px;color:var(--onDeep)}

  /* 6 一言（SP は写真なし） */
  .s6{padding:72px 20px 64px}
  .s6-photo{display:none}
  .s6-title{font-size:32px;line-height:1.43;font-weight:700;color:var(--head);letter-spacing:.03em}
  .s6-sub{margin-top:16px;font-size:14px}

  /* 7 店の案内 */
  .s7{background:var(--bg2);display:flex;flex-direction:column;padding-bottom:50px}
  .s7-big{order:-1;margin:20px 20px 0;aspect-ratio:350/348}
  .s7-small{display:none}
  .s7-title{margin:34px 20px 0;font-size:24px}
  .s7-table{margin:24px 20px 0;border-bottom:1px solid var(--rule)}
  .s7-table div{display:flex;padding:15px 0;border-top:1px solid var(--rule)}
  .s7-table dt{width:110px;flex:none;font-weight:700;color:var(--head);font-size:13px}
  .s7-table dd{font-size:13px}
  .s7-note{margin:20px 20px 0;font-size:12.5px;line-height:1.9}

  /* 8 予約 */
  .s8{display:flex;flex-direction:column;padding-bottom:48px}
  .s8-photo{margin:20px 19px 0;aspect-ratio:352/259}
  .s8-title{margin:34px 20px 0;font-size:24px}
  .s8-body{margin:12px 20px 0;font-size:14px}
  .s8-list{margin:20px 20px 0}
  .s8-list div{display:flex;padding:12px 0;border-top:1px solid var(--rule)}
  .s8-list div:last-child{border-bottom:1px solid var(--rule)}
  .s8-list dt{width:88px;flex:none;font-weight:700;color:var(--head);font-size:13px}
  .s8-list dd{font-size:13px}
  .btn{display:flex;align-items:center;justify-content:center;background:var(--green);color:var(--onDeep);text-decoration:none;font-weight:700;letter-spacing:.06em;transition:background-color .2s ease,transform .15s ease}
  .btn:active{transform:translateY(1px)}
  .s8-btn{margin:28px 20px 0;height:52px;font-size:16px}

  .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
  .strip picture{aspect-ratio:1/1}
  .ft{background:var(--bg2);padding:40px 20px 44px;display:flex;flex-direction:column}
  .ft-logo{position:static;font-size:17px}
  .ft-demo{order:4;margin-top:8px;font-size:12.5px}
  .ft-nav{order:2;margin-top:22px}
  .ft-nav li{font-size:15px;line-height:2.6}
  .ft-nav a{text-decoration:none;display:inline-block;min-height:32px;line-height:32px}
  .ft-info{order:3;margin-top:22px}
  .ft-info li{font-size:12.5px;line-height:2}
  .ft-info li:nth-child(n+2){display:none}
}

/* 見せ場（1つだけ）：今週の花の行に触れると、下の罫が緑で1本ひらく。transform だけ・250ms */
@media (hover:hover){
  .s2-list li::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--green);
    transform:scaleX(0);transform-origin:left center;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .s2-list li:hover::after{transform:scaleX(1)}
  .s2-list li{position:relative}
}

@media (min-width:600px) and (max-width:1023px){
  body{max-width:520px;margin:0 auto}
  :root{--s:calc(520px/390)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}