/* 
 * common.css
 * コンポーネント以外で使用する共通スタイル
 */
body,
html {
  font-family: 'Zen Old Mincho', serif;
  font-weight: 400;
  font-style: normal;
  scroll-behavior: smooth;
  scroll-padding-top: calc(80 / var(--full-width) * 100vw);
  --full-width: 1440;
  --sp-full-width: 750;
}
.__noScroll {
  overflow: hidden;
}
.container {
  width: calc(1100 / var(--full-width) * 100vw);
  margin: 0 auto;
}
.s .container {
  width: calc(690 / var(--sp-full-width) * 100vw);
}
/* pcのみに適用しているもの */
.pc {
  display: block;
}
.s .pc {
  display: none;
}
/* spのみに適用しているもの */
.sp {
  display: none;
}
.s .sp {
  display: block;
}
a {
  display: block;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  transition: opacity 0.3s;
}
a:hover {
  opacity: 0.7;
}

/* メイン背景 */
.main-bg {
  background-image: url(../../img/main-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* タイトル英字 */
.__fontEn {
  font-family: 'Kaisei Decol', serif;
}

/* 色　*/
/* グラデーション */
.__grad-color01 {
  background: linear-gradient(
    180deg,
    rgba(187, 148, 84, 1) 0%,
    rgba(187, 148, 84, 1) 0%,
    rgba(162, 103, 6, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 背景が暗い際のグラデーション */
.__grad-color02 {
  background: linear-gradient(
    180deg,
    rgba(187, 148, 84, 1) 0%,
    rgba(255, 255, 255, 1) 0%,
    rgba(207, 178, 134, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* aboutだけ */
.__grad-color03 {
  background: linear-gradient(
    180deg,
    rgba(187, 148, 84, 1) 0%,
    rgba(162, 103, 6, 1) 0%,
    rgba(254, 228, 185, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.__black {
  color: #000;
}
.__blackBg {
  background-color: #0a0a0a;
}
.__white {
  color: #fff;
}
.__green {
  background-color: #6ba16d;
}
.__WineRed {
  background-color: #94243c;
}
.__pink {
  background-color: #ba5768;
}
.__blue {
  background-color: #6d96b8;
}