:root { 
  --black: #212121;
  --black-2: #000000;
  --black-3: #0000004c;
  --brown: #975b33;
  --dark-brown: #520000;
  --gray: #f1f1f1;
  --light-blue: #a9dbe5;
  --light-orange: #fde8d0;
  --log-cabin: #222222;
  --orange: #f8bd72;
  --red: #e81b39;
  --white: #ffffff;

  --font-size-l: 20px;
  --font-size-m: 18px;
  --font-size-s: 16px;
  --font-size-xs: 13px;

  --font-size-heading-l: 44px;
  --font-size-heading-m: 32px;
  --font-size-heading-s: 26px; 
  --font-size-heading-xs: 22px;
 
  --font-family-eb_garamond: "EB Garamond", serif;
  --font-family-hina_mincho: "Hina Mincho", serif;
  --font-family-hiragino_kaku_gothic_pro-w3: "Hiragino Kaku Gothic Pro-W3", Helvetica;


  --letter-spacing: 0.05;
  --letter-spacing-6: 0.06;  
  --letter-spacing-0: 0;
  
  --line-height: 1.8;
  --line-height-160: 1.6;
  --line-height-100: 1;    

}

/* @media screen and (max-width: 767px) { */
@media screen and (max-width: 1199px) {  
  :root {
  --font-size-heading-l: 26px;
  --font-size-heading-m: 22px;
  --font-size-heading-s: 16px; 
  --font-size-heading-xs: 14px;
  }
}

.u-color-red {
  color: var(--red);
}

/****************************
タイポグラフィ
****************************/
main {
  font: unset;  
  font-family: var(--font-family-hina_mincho);
  font-size: var(--font-size-m);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-style: normal;
  font-weight: 400;
  color: var(--dark-brown);
}

.heading-l {
  font-size: var(--font-size-heading-l);
}

.heading-m {
  font-size: var(--font-size-heading-m);
}

.heading-s {
  font-size: var(--font-size-heading-s);
}

.heading-xs {
  font-size: var(--font-size-heading-s);
}

/* メモ: body-m = 平文*/

.body-l {
  font-size: var(--font-size-l);
}

.body-s {
  font-size: var(--font-size-s);
}

.body-xs {
  color: var(--black); /*茶色だと見ずらいため*/
  font-size: var(--font-size-xs);
}


/*-------- 英語タイトル --------*/
.title_en,
.title_en_about {
  color: var(--red);
  font-family: var(--font-family-eb_garamond);
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-6);
  line-height: var(--line-height-100);
}
.title_en {
  font-size: 62px;
}  
.title_en_about {
  font-size: 120px;
}
@media screen and (max-width: 767px) {
  .title_en {
    font-size: 36px;
  }
  .title_en_about {
    font-size: 70px;
  }
}

/* 日本語 小さい文章の行間調整 */
.small-text {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-160);
}


/****************************
ブレイクポイント
****************************/

@media screen and (max-width: 767px) {
  　main {
    min-width: 375px;
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  　main {
    min-width: 768px;
  }
}
@media screen and (min-width: 1200px) {
  main {
    min-width: 1200px;
  }
}

/****************************
基本設定・背景色
****************************/
body {
  align-items: center;
  background-color: var(--light-orange);
  display: flex;
  flex-direction: column;
  position: relative;
}

main {
  overflow: hidden;
  width: 100%;
}


/****************************
マージンだけのクラス
****************************/

.u-mt-20 {
  margin-top: 20px;
}