/* ==================================================================
   WARA TRAVEL ｜ 共通の見た目
   デザインガイド v1.0 に対応。色や書体を変えるときはここだけ直す。
   ================================================================== */
:root{
  --paper:#FFFFFF; --wash:#F4F8F6; --forest:#0F3B32; --jade:#2FAE86;
  --mint:#3FD6A8; --ink:#16211E; --sub:#5A6E68; --rule:#DFE7E4;
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Songti SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  line-height:1.9;-webkit-font-smoothing:antialiased}
.wrap{max-width:520px;margin:0 auto}
a{color:inherit}

header{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--paper);z-index:20}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
/* ロゴ。同じフォルダに logo.png を置くと、それが表示される。
   ファイルが無い間は、下地のミントの円がそのまま見える。 */
.mark{width:30px;height:30px;border-radius:50%;
  background:url(logo.png) center/cover no-repeat,
             linear-gradient(140deg,var(--mint),var(--jade))}
.brand .bn{font-size:11px;letter-spacing:.2em;color:var(--forest);display:block}
.brand .bt{font-size:8px;letter-spacing:.13em;color:var(--sub);display:block;margin-top:1px}
.menu{font-size:10px;letter-spacing:.16em;color:var(--sub)}

section{padding:0 20px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;margin:48px 0 16px}
.sechead h2{font-family:var(--serif);font-weight:500;font-size:18px;
  color:var(--forest);letter-spacing:.1em}
.sechead a{font-size:10.5px;color:var(--sub);text-decoration:none;letter-spacing:.06em}
.eyebrow{font-size:10px;letter-spacing:.24em;color:var(--jade);margin-bottom:12px}

.cta{margin:56px 20px 0;padding:36px 24px;background:var(--wash);text-align:center}
.cta .t{font-family:var(--serif);font-size:20px;color:var(--forest);line-height:1.6}
.cta .s{font-size:11.5px;color:var(--sub);margin-top:10px}
.cta a{display:inline-block;margin-top:20px;font-size:12px;color:#fff;
  background:var(--forest);text-decoration:none;padding:12px 30px;letter-spacing:.08em}

footer{margin-top:46px;padding:26px 20px 48px;border-top:1px solid var(--rule)}
.fl{display:flex;gap:18px;font-size:10.5px;color:var(--sub)}
footer a{text-decoration:none}
.fc{font-size:9.5px;color:var(--sub);letter-spacing:.08em;margin-top:14px}

.rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ==================================================================
   ここから下は、画面が広いとき（パソコン）だけ効く指定。
   900ピクセルより狭い画面では、上の指定がそのまま使われる。
   ================================================================== */
@media (min-width:900px){

  .wrap{max-width:1120px}

  header{padding:18px 40px}
  .mark{width:34px;height:34px}
  .brand .bn{font-size:12px}
  .brand .bt{font-size:9px}
  .menu{font-size:11px}

  section{padding:0 40px}
  .sechead{margin:46px 0 20px}
  .sechead h2{font-size:21px}
  .sechead a{font-size:11.5px}

  .cta{margin:76px 40px 0;padding:56px 40px}
  .cta .t{font-size:24px}
  .cta .s{font-size:12.5px}

  footer{margin-top:64px;padding:34px 40px 66px;
    display:flex;justify-content:space-between;align-items:center}
  .fl{font-size:11.5px}
  .fc{margin-top:0}
}

/* ==================================================================
   メニュー（nav.js が作るヘッダーの見た目）
   ================================================================== */
.navDesk{display:none}

.navBtn{border:0;background:none;padding:6px 2px;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;width:26px}
.navBtn span{display:block;height:1px;background:var(--forest)}

.navPanel{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.97);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.navPanel.on{display:flex}
.navPanel nav{display:flex;flex-direction:column;align-items:center;gap:26px}
.navPanel a{font-family:var(--serif);font-size:22px;color:var(--forest);
  text-decoration:none;letter-spacing:.12em}
.navPanel a.on{color:var(--jade)}
.navClose{position:absolute;top:16px;right:20px;border:0;background:none;
  font-size:26px;color:var(--forest);cursor:pointer;line-height:1}

@media (min-width:900px){
  .navBtn{display:none}
  .navDesk{display:flex;gap:30px}
  .navDesk a{font-size:12px;letter-spacing:.14em;color:var(--sub);
    text-decoration:none;padding:4px 0}
  .navDesk a:hover{color:var(--forest)}
  .navDesk a.on{color:var(--forest);border-bottom:1px solid var(--forest)}
}