@charset "UTF-8";

/*============================
　ローカルフォント指定 例
============================*/
@font-face {
  font-family: "perpetua";
  src: url(../fonts/perpetua-titling-mt-light.ttf);
}

/* .font-perpetua {
  font-family: "perpetua", serif;
} */

/*============================
  サイト毎汎用デフォルト設定関連
============================*/

:root {
  --font-scale: 1;
  /* 文字サイズ指定ギミック組み込み予定関数 */
  --base_color: #263f20;
  --sub_color: #bf9d00;
}

body {
  font-feature-settings: "halt";
  font-weight: 400;
  /* =====
  100	Thin (Hairline)
  200	Extra Light (Ultra Light)
  300	Light
  400	Normal (Regular)
  500	Medium
  600	Semi Bold (Demi Bold)
  700	Bold
  800	Extra Bold (Ultra Bold)
  900	Black (Heavy)
  ===== */
}

img {
  height: auto;
  max-width: 100%;
  width: auto;
}

a:hover {
  transition: 0.3s;
  filter: brightness(120%);
  opacity: .7;
}

* p{
  text-align: left;
}
/*============================
  デフォルト設定例
============================*/
ul.list li {
  list-style: disc;
  list-style-position: outside;
  padding-left: 1em;
  text-indent: -1em;
}

/* スライダーバー非表示 start */
.noSlider {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.noSlider::-webkit-scrollbar {
  display: none;
}

body {
  --wrapper_wide: 1000px;
  --wrapper_wide_M: 1200px;
  --wrapper_wide_L: 1340px;
  --wrapper_padding: 30px;
  --wrapper_padding_sp: 15px;
}

/* ===== wrapper 関連 start ===== */
.wrapper_outer {
  width: calc(100vw - max(0px, calc(50vw - var(--wrapper_wide) / 2 - var(--wrapper_padding))));
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  height: 100%;
  /* margin-block: 20px; */
}

/* サイズ */
.wrapper_outer.middle {
  width: calc(100vw - max(0px, calc(50vw - var(--wrapper_wide_M) / 2 - var(--wrapper_padding))));
}

.wrapper_outer.large {
  width: calc(100vw - max(0px, calc(50vw - var(--wrapper_wide_L) / 2 - var(--wrapper_padding))));
}

/* 方向 */
.wrapper_outer.right {
  justify-content: flex-start;
  margin-left: max(0px, calc(50vw - var(--wrapper_wide) / 2 - var(--wrapper_padding)));
  margin-right: 0;
}

.wrapper_outer.right.middle {
  margin-left: max(0px, calc(50vw - var(--wrapper_wide_M) / 2 - var(--wrapper_padding)));
}

.wrapper_outer.right.large {
  margin-left: max(0px, calc(50vw - var(--wrapper_wide_L) / 2 - var(--wrapper_padding)));
}

.wrapper_outer.both {
  margin-right: 0;
  margin-left: 0;
  width: 100%;
}

.wrapper_outer.left {
  justify-content: flex-end;
  margin-right: max(0px, calc(50vw - var(--wrapper_wide) / 2 - var(--wrapper_padding)));
  margin-left: 0;
}

.wrapper_outer.left.middle {
  margin-right: max(0px, calc(50vw - var(--wrapper_wide_M) / 2 - var(--wrapper_padding)));
}

.wrapper_outer.left.large {
  margin-right: max(0px, calc(50vw - var(--wrapper_wide_L) / 2 - var(--wrapper_padding)));
}

.wrapper {
  width: 100%;
  margin-inline: auto;
  /* padding-block: 20px; */
  text-align: center;
  /*  */
  max-width: min(100% + var(--wrapper_padding) * 2, var(--wrapper_wide) + var(--wrapper_padding) * 2);
  padding-inline: var(--wrapper_padding);
}

/* .wrapper * {
  text-align: initial;
} */

.middle .wrapper {
  max-width: min(100% + var(--wrapper_padding) * 2, var(--wrapper_wide_M) + var(--wrapper_padding) * 2);
}

.large .wrapper {
  max-width: min(100% + var(--wrapper_padding) * 2, var(--wrapper_wide_L) + var(--wrapper_padding) * 2);
}

.right .wrapper {
  margin-left: 0;
}

.right.full .wrapper {
  margin-left: 0;
  max-width: 100%;
}

.left .wrapper {
  margin-right: 0;
}

.left.full .wrapper {
  margin-right: 0;
  max-width: 100%;
}

.both.full .wrapper {
  margin-right: 0;
  margin-left: 0;
  max-width: 100%;
}

/* 追加要素 */
/* .side-text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  width: var(--side-text-width);
  white-space: nowrap;
}

.side_area {
  background-color: rgb(0, 150, 37);
  flex: 1 1 auto;
  min-width: 200px;
} */

/* ===== wrapper 関連 end ===== */


/* フェイドイン start */
.fade_d {
  transition: all 1600ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 60px);
}

.fade_l {
  transition: all 1600ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(60px, 0px);
}

.fade_r {
  transition: all 1600ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(-60px, 0px);
}

.fadein {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
}

/* フェイドイン end */