/* =====================================================================
   common.css
   全ページ共通のCSSです(ナビ・フッター・配色・基本リセットなど)。
   index.html だけでなく、works / contact / news でも読み込みます。

   中のコメントは、元の style.css からそのまま移してきたものです。
===================================================================== */

/* ============ TOKENS ============ */

:root{
  --washi-img:url("../images/washi_images.jpg");
  --paper:#F4EFE3;
  --paper-deep:#EAE1CB;
  --ink:#2B241E;
  --ink-soft:#5B5044;
  --rust:#B14A2B;
  --rust-deep:#8C3A22;
  --gold:#C89A46;
  --gold-soft:#E4C983;
  --dusk:#1E2A42;
  --dusk-deep:#131B2C;
  --line:#D8C6A1;
  --maxw:1160px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans JP', sans-serif;
  font-weight:400;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Shippori Mincho', serif;
  color:var(--ink);
  margin:0;
  font-weight:600;
}

.en{ font-family:'Fraunces', serif; font-size: 1.2rem;}


a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

/* ============ここからナビの設定============ */
.site-nav{
  /* position:fixedは画面に固定 z-index:100は重なりを指定数値が大きいほど上にくる */
  position:fixed; top:0; left:0; right:0; z-index:100;
  /* 上下：22px 左右:0px */
  padding:22px 0;
  /* transitionは変化の意味で、CSSの値が変化するときに、いきなり切り替えず、0.35秒かけて滑らかに変化させる */
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
/* display:flexは子要素を横方向に並び、縦方向の位置を中央揃え、子要素を左右の端に配置して、その間を均等に広げる */
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
/* ナビの背景の */
.site-nav.scrolled{
  background:rgba(244,239,227,.94);
  padding:14px 0;
  box-shadow:0 1px 0 var(--line);
}
/* ナビ左 */
.brand{
  display:flex;
  align-items:center;
  gap:10px;            /* ロゴと文字の間隔。狭くしたいなら小さく */
}
.brand-mark{
  height:56px;         /* ロゴの高さ */
  width:auto;
  flex-shrink:0;
}
.brand-name{
  height:24px;         /* 文字画像の高さ。大きくしたいなら増やす */
  width:auto;          /* 縦横比を保つ */
  display:block;
}

/* ============ナビ本体============ */
/* ナビの部分を横並びにして子要素同士の隙間を38pxにする */
.nav-links{ display:flex; gap:38px; }

/* transition:color .2s ease; 0.2秒かけて滑らかに変化　ナビの最初も文字はゴールド*/
/* position:relative;は、自分を基準にする 
   position:absolute;は、基準となる親の中で位置を指定する
   position:fixed;は、画面に固定する */
.nav-links a{ font-size:1rem; position:relative; padding-bottom:4px; color:var(--gold); transition:color .2s ease; }
.site-nav.scrolled .nav-links a{ color:var(--ink); }

/* ナビゲーションの文字の下に、左から右へ伸びる下線アニメーションを作るCSS
   ::after は、HTMLに実際には書いていない要素をCSSで追加するためのもの
   content:'';は、::afterを表示させるために必要。
   position: absolute;は、afterを通常の文字の流れから外して、好きな位置に配置するため（親のaにposition: relative;が必要）
   left:0; bottom:0; width:0; height:1px;は左端から下端、線幅を０にして見えなくしている。線の幅を1px
   background:currentColor;は、その要素の文字色（color）と同じ色
   0.25秒かけて滑らかに変化させる */
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .25s ease;
}
/* マウスがhoverしたときに線幅が100％になるよにしている */
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
/* ナビゲーションの中で active クラスが付いているリンクの文字色を、--gold-soft に設定した色にする */
.nav-links a.active{ color:var(--gold-soft); }
/* スクロール後のナビゲーションの中で、activeになっているリンクの文字色を--rust-deepにする */
.site-nav.scrolled .nav-links a.active{ color:var(--rust-deep); }
/* 32×24pxの、枠や背景を持たないボタンを作る。ただし通常は非表示。
   中のハンバーガーの線を配置できるように自分を基準にし、マウスを乗せたら指マークにする */
.nav-toggle{ display:none; background:none; border:0; width:32px; height:24px; position:relative; cursor:pointer; padding:0; }
/* .nav-toggle(トグル：オン／オフを豪語に切り替える) の中にある、ハンバーガーメニューの「3本線」を作るためのCSS
   transform、opacity、top が変化したとき、0.3秒かけて滑らかに変化させる */
.nav-toggle span{ position:absolute; left:0; right:0; height:2px; background:var(--paper); transition:transform .3s ease, opacity .3s ease, top .3s ease; }
.site-nav.scrolled .nav-toggle span{ background:var(--ink); }
/* ハンバーガーメニューが「✕」に変化するアニメーション
   親要素の中にあるspanのうち、１番目のsapnを上から2px、２番目のsapn11px、３番目のsapn20px */
.nav-toggle span:nth-child(1){top:2px;}
.nav-toggle span:nth-child(2){top:11px;}
.nav-toggle span:nth-child(3){top:20px;}
/* メニューがactiveになったとき、1本目の線を45度回転さ、
   2本目の線を消し、3本目の線を反対方向に45度回転させる */
.nav-toggle.open span:nth-child(1){top:11px; transform:rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){top:11px; transform:rotate(-45deg);}

/* ============ 共通ボタン(アウトライン) ============ */
/* index・works・newsの「もっと見る」やココナラカードなど、複数ページで使い回すボタン */
.btn-outline{
/* ボタンを小さく縮めない（ボタンの幅を維持）
   ボタンをインライン要素のように扱いつつ、paddingなどのサイズ指定もできるようにする */
  flex-shrink:0; display:inline-block; padding:13px 28px;
  border:1px solid var(--gold-soft); color:var(--gold-soft); font-size:.85rem; letter-spacing:.04em;
  /* マウスを乗せたときの色変化を、0.25秒かけて滑らかにする指定。 */
  transition:background .25s ease, color .25s ease;
}
/* マウスをボタンの上に乗せたときのボタンの変化 */
.btn-outline:hover{ background:var(--gold-soft); color:var(--dusk-deep); }

/* ============ FOOTER ============ */

footer{ background:var(--paper); padding:20px 0; font-size:.8rem; text-align:center;}

/* ============ 共通パーツのレスポンシブ(ナビまわり) ============ */
@media (max-width:760px){
  .wrap{ padding:0 22px; }
  .nav-links{
    /* スマホサイズにした際のメニューの背景の設定*/
    position:fixed; top:64px; right:0; width:50%; max-width:300px; height:auto;
    background:var(--paper); flex-direction:column; gap:0; padding:20px 0 36px;
    transform:translateX(100%); transition:transform .35s ease;
    box-shadow:-6px 0 24px rgba(20,14,8,.12);
  }
  /* スマホサイズになったらメニューを画面内にスライドさせて表示する */
  .nav-links.open{ transform:translateX(0); }
  /* メニューにアンダーラインを出す。!important は、他のCSSよりもこの指定を優先させるもの。 */
  .nav-links a{ padding:16px 28px; display:block; width:100%; color:var(--ink) !important; }
  /* ハンバーガーメニューを出す */
  .nav-toggle{ display:block; }
  /* ハンバーガーメニューの色 */
  .nav-toggle span{ background:var(--dusk); }

  .site-nav.scrolled .nav-toggle span{ background:var(--ink); }
}
.wpcf7 .hidden-fields-container{ display:none; }