@charset "UTF-8";
/*   
Theme Name: yuipiyo-recruit
Theme URI: https://xeory.jp/extension
Template: xeory_extension
Description: Xeory拡張子テーマ
Author: バズ部
Author URI: https://lucy.ne.jp/bazubu/
Version: 1.0.0
*/

@charset "UTF-8";

/* ----------------------------------------
* root
---------------------------------------- */
:root {
  --pc-width: 1920;
  --sp-width: 780;

  --opacity-hover: 0.8;

  /* フォントファミリー＆ウェイト設定 */
  --f-main: "Lato", "Zen Kaku Gothic New", serif;
  --f-main-weight-black: 900;
  --f-main-weight-bold: 700;
  --f-main-weight-semibold: 600;
  --f-main-weight-medium: 500;
  --f-main-weight-regular: 400;

  /* アクセント用欧文フォントの分離 (Josefin Sans) */
  --f-accent: "Josefin Sans", sans-serif;
  --f-accent-weight-semibold: 600;

  /* カラーガイド */
  --c-white: #FFFFFF;
  --c-black: #000000;
  --c-brown: #49322A;
  --c-mint: #3CDC88;
  --c-sky-blue: #26BEEA;
  --c-orange: #FF9600;
  --c-amber: #FFAD00;
  --c-peach: #FFDFB2;
  --c-cream: #FFEFD9;
  --c-vanilla: #FFF9DC;
  --c-coral: #FF9382;
  --c-lime: #69DC6E;

  /* レスポンシブフォント計算（基準：1920px） */
  /* 計算式: calc((デザインのカンプ値 / 1920) * 100vw) */
  --font-base-pc: calc((20 / var(--pc-width)) * 100vw); /* 1920pxの画面でちょうど20pxになります */
  --font-base-sp: calc((30 / var(--sp-width)) * 100vw);
  --font-base-min: 14px; /* モバイル端末での最小フォントサイズ保証 */

  /* 行間（ラインハイト）＆文字間（レタースペース） */
  --lh-base-pc: 2.0;
  --lh-base-sp: 1.8;
  --ls-base: 0.11em;

  /* イージング＆Zインデックス（既存設定の維持） */
  --ease-out-3: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-pop: cubic-bezier(0.44, 0, 0.21, 1.23);
  --z-base: 0;
  --z-menu: 101;
  --z-header: 102;
  --z-header-nav: 103;
  --z-header-sticky: 104;
}

/* ----------------------------------------
* ALL
---------------------------------------- */
body {
  margin: 0;
  
  /* :rootで定義した変数をマッピング */
  font-family: var(--f-main);
  font-weight: var(--f-main-weight-bold);
  color: var(--c-brown);
  background-color: var(--c-white);
  
  /* レスポンシブフォントサイズ（フォント崩れ防止用のclamp関数） */
  /*font-size: clamp(var(--font-base-min), var(--font-base-pc), 20px);*/
  font-size: var(--font-base-pc);
  
  /* 行間＆文字間 */
  line-height: var(--lh-base-pc);
  letter-spacing: var(--ls-base);
  
  /* テキストの折り返し処理＆フォントレンダリングの最適化 */
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

menu, ol, ul {
  padding: 0;
}

@media screen and (max-width: 780px) {
  body {
    font-size: var(--font-base-sp);
    line-height: var(--lh-base-sp);
  }
}