@charset 'UTF-8';

:where(.stf-main) {
  --board: 1200;
  --max: 1px;
}

:where(.stf-main) {
  --colorBlack: #222;
  --colorBg: #fff;
  --colorMain: #dc1e37;
}

:where(.stf-main) {
  --fontGothic: 'Noto Sans JP', sans-serif;
  --fontMincho: 'Zen Old Mincho', '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', serif;
  --fontEnglish: 'Noto Sans', sans-serif;
  --fontMaru: 'Zen Maru Gothic', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

:where(.stf-main) {
  --weightLight: 300;
  --weightRegular: 400;
  --weightMedium: 500;
  --weightBold: 700;
}

:where(.stf-main) {
  --fontSize: r(16);
  --letterSpacing: 0;
  --lineHeight: 1.75;
  --kerning: unset;
}

:where(.stf-main) {
  --bodyBg: var(--colorBg);
  --speed: .4s;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes fadeInScale {
  from {
    opacity: 0;
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.stf-main {
  position: relative;
  color: #000;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  font-family: 'Noto Sans JP', sans-serif;
}

.stf-main img {
  width: 100%;
  height: auto;
}

.stf-main__inner {
  position: sticky;
  z-index: 2;
  padding-top: 1px;
  background-color: #fff;
}

.stf__title {
  color: var(--yanmar-premium-red-100);
}

.stf-mv {
  position: sticky;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  align-items: flex-start;
  -ms-flex-align: start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: clamp(0px, 10vw / var(--board) * 10 * 200, var(--max) * 200);
  height: 100vh;
  background-image: url('/jp/save_the_farms/img/save_the_farms/image_mv.webp');
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

.stf-mv__banner {
  position: absolute;
  right: clamp(0px, 10vw / var(--board) * 10 * 21, var(--max) * 21);
  bottom: clamp(0px, 10vw / var(--board) * 10 * 250, var(--max) * 250);
  width: clamp(0px, 10vw / var(--board) * 10 * 324, var(--max) * 324);
  opacity: 0;
  -webkit-animation: fadeInUp .6s ease-out 1s both;
  animation: fadeInUp .6s ease-out 1s both;
}

.stf-mv__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
}

.stf-mv__title span {
  letter-spacing: .28em;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
  line-height: 1.5;
}

.stf-mv__title em {
  display: block;
  width: clamp(0px, 10vw / var(--board) * 10 * 922, var(--max) * 922);
}

.stf-message {
  position: relative;
  background-color: rgba(0, 0, 0, .6);
}

@supports (backdrop-filter: blur(1px)) {
  .stf-message {
    background-color: rgba(0, 0, 0, .2);

    backdrop-filter: blur(50px);
  }
}

.stf-message-inner {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: clamp(0px, 10vw / var(--board) * 10 * 90, var(--max) * 90) clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20) clamp(0px, 10vw / var(--board) * 10 * 125, var(--max) * 125);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}

.stf-message-inner p {
  text-align: center;
  letter-spacing: .14em;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  line-height: 2;
}

.stf-message-inner p+p {
  margin-top: 1em;
}

.stf-message-inner img {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80);
  max-width: 100%;
  width: clamp(0px, 10vw / var(--board) * 10 * 382, var(--max) * 382);
  height: auto;
}

.stf__tech {
  margin-right: auto;
  margin-left: auto;
  width: clamp(0px, 10vw / var(--board) * 10 * 742, var(--max) * 742);
}

.stf__vision-container {
  display: -ms-grid;
  display: grid;
  gap: clamp(0px, 10vw / var(--board) * 10 * 21, var(--max) * 21);
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
  margin-right: auto;
  margin-left: auto;
  width: clamp(0px, 10vw / var(--board) * 10 * 1110, var(--max) * 1110);

  -ms-grid-columns: 1fr clamp(0px, 10vw / var(--board) * 10 * 21, var(--max) * 21) 1fr;
  grid-template-columns: repeat(2, 1fr);
}

.stf-banner {
  padding: clamp(0px, 10vw / var(--board) * 10 * 50, var(--max) * 50) 0;
  background-color: var(--black-5-opaque);
}

.stf-agriculture-week-content {
  overflow: hidden;
  margin-right: auto;
  margin-left: auto;
  max-width: 100%;
  width: clamp(0px, 10vw / var(--board) * 10 * 956, var(--max) * 956);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  background-image: url('/jp/save_the_farms/img/save_the_farms/bg_week.webp');
  background-position: center top;
  background-size: 100% 100%;
}

.stf-agriculture-week-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: clamp(0px, 10vw / var(--board) * 10 * 100, var(--max) * 100);
  background-color: #209560;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 38, var(--max) * 38);
}

.stf-agriculture-week-main {
  padding: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
  border: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4) solid #cbcbcb;
  border-top: 0;
}

.stf-agriculture-week-inner {
  padding: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64) clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  background-color: #fff;
}

.stf-event-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 30, var(--max) * 30);
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
}

.stf-event-details p {
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 23, var(--max) * 23);
  line-height: 1.5;

  text-box: trim-both cap alphabetic;
}

.stf-yanmar-exhibition {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
}

.stf-exhibition-description {
  font-size: clamp(0px, 10vw / var(--board) * 10 * 19, var(--max) * 19);
  line-height: 1.5;

  text-box: trim-both cap alphabetic;
}

.stf-exhibition-button {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
  text-align: center;
}

.stf-special-lecture {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
}

.stf-lecture-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 28, var(--max) * 28);
  line-height: 1.5;

  text-box: trim-both cap alphabetic;
}

.stf-lecture-theme {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 19, var(--max) * 19);
  line-height: 1.5;

  text-box: trim-both cap alphabetic;
}

.stf-lecture-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 30, var(--max) * 30);
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 23, var(--max) * 23);
  padding: 0 clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  height: clamp(0px, 10vw / var(--board) * 10 * 58, var(--max) * 58);
  border: 1px solid rgba(0, 0, 0, .2);
  border-right: 0;
  border-left: 0;
}

.stf-lecture-details em {
  margin-right: 0;
  font-weight: 700;
}

.stf-lecture-date,
.stf-lecture-location {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
}

.stf-speakers {
  display: -ms-grid;
  display: grid;
  gap: clamp(0px, 10vw / var(--board) * 10 * 5, var(--max) * 5);
  padding-left: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  border-bottom: 1px solid rgba(0, 0, 0, .2);

  -ms-grid-columns: 1fr clamp(0px, 10vw / var(--board) * 10 * 5, var(--max) * 5) 1fr;
  grid-template-columns: repeat(2, 1fr);
}

.stf-speaker-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 6, var(--max) * 6);
  padding: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20) 0;
}

.stf-speaker-title {
  font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
}

.stf-speaker-profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
}

.stf-speaker-avatar {
  width: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
}

.stf-speaker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  -o-object-fit: cover;
}

.stf-speaker-details {
  font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
}

.stf-registration {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
}

.stf-registration-text {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);

  text-box: trim-both cap alphabetic;
}

.stf-news-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
}

.stf-media-content {
  position: relative;
  margin: auto;
  width: clamp(0px, 10vw / var(--board) * 10 * 956, var(--max) * 956);
}

.stf-media-content img {
  position: relative;
  z-index: 1;
}

.stf-media-button {
  position: absolute;
  bottom: clamp(0px, 10vw / var(--board) * 10 * 35, var(--max) * 35);
  left: clamp(0px, 10vw / var(--board) * 10 * 35, var(--max) * 35);
  z-index: 2;
}

.stf-float {
  position: fixed;
  right: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
  bottom: clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80);
  z-index: 10;
  opacity: 0;
  -webkit-transition: opacity .8s;
  transition: opacity .8s;
  pointer-events: none;
}

.stf-float.is-active {
  opacity: 1;
  pointer-events: auto;
}

.stf-float__link {
  display: block;
  width: clamp(0px, 10vw / var(--board) * 10 * 264, var(--max) * 264);
}

.pc-none {
  display: none;
}

@media (max-width: 768px) {
  .stf-main {
    padding-bottom: 0;
  }

  .stf-mv {
    padding-top: clamp(0px, 10vw / var(--board) * 10 * 120, var(--max) * 120);
    height: calc(100vh - clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80));
    background-image: url('/jp/save_the_farms/img/save_the_farms/image_mv_sp.webp');
    background-position: center top;
  }

  .stf-mv__banner {
    right: clamp(0px, 10vw / var(--board) * 10 * 5, var(--max) * 5);
    bottom: clamp(0px, 10vw / var(--board) * 10 * 60, var(--max) * 60);
    width: clamp(0px, 10vw / var(--board) * 10 * 243, var(--max) * 243);
  }

  .stf-mv__title {
    gap: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .stf-mv__title span {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .stf-mv__title em {
    width: clamp(0px, 10vw / var(--board) * 10 * 350, var(--max) * 350);
  }

  .stf-message-inner {
    padding: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56) clamp(0px, 10vw / var(--board) * 10 * 33, var(--max) * 33) clamp(0px, 10vw / var(--board) * 10 * 148, var(--max) * 148);
  }

  .stf-message-inner p {
    text-align: justify;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  }

  .stf-message-inner p br {
    display: none;
  }

  .stf__tech {
    width: clamp(0px, 10vw / var(--board) * 10 * 360, var(--max) * 360);
  }

  .stf__vision-container {
    width: clamp(0px, 10vw / var(--board) * 10 * 360, var(--max) * 360);

    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .stf-banner {
    padding-bottom: 0;
  }

  .stf-agriculture-week-content {
    border-radius: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
    background-color: #f7f3f3;
    background-image: none;
  }

  .stf-agriculture-week-title {
    height: clamp(0px, 10vw / var(--board) * 10 * 62, var(--max) * 62);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 19, var(--max) * 19);
  }

  .stf-agriculture-week-main {
    padding: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
    border: clamp(0px, 10vw / var(--board) * 10 * 1, var(--max) * 1) solid #cbcbcb;
  }

  .stf-agriculture-week-inner {
    padding: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24) clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    border-radius: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
  }

  .stf-event-details {
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .stf-event-details p {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  }

  .stf-yanmar-exhibition {
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .stf-exhibition-description {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
    line-height: 1.8;
  }

  .stf-exhibition-button {
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .stf-special-lecture {
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
  }

  .stf-lecture-header {
    white-space: nowrap;
    letter-spacing: 0;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 19, var(--max) * 19);

    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
  }

  .stf-lecture-theme {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  }

  .stf-lecture-details {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0;
    padding: 0;
    height: auto;
    border: 0;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  }

  .stf-lecture-details em {
    margin-right: 0;
    width: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
  }

  .stf-lecture-date,
  .stf-lecture-location {
    padding: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16) 0;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, .2);
  }

  .stf-speakers {
    padding-left: 0;
    border-top: 1px solid rgba(0, 0, 0, .2);

    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .stf-speaker+.stf-speaker {
    border-top: 1px solid rgba(0, 0, 0, .2);
  }

  .stf-speaker-info {
    gap: 0;
    padding: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10) 0;
  }

  .stf-speaker-title {
    width: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  }

  .stf-speaker-profile {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: calc(100% - clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56));
  }

  .stf-speaker-avatar {
    width: clamp(0px, 10vw / var(--board) * 10 * 48, var(--max) * 48);
  }

  .stf-speaker-details {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  }

  .stf-registration-text {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  }

  .stf-media-content {
    width: clamp(0px, 10vw / var(--board) * 10 * 360, var(--max) * 360);
  }

  .stf-media-button {
    left: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .stf-float {
    right: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    bottom: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
  }

  .stf-float__link {
    width: clamp(0px, 10vw / var(--board) * 10 * 160, var(--max) * 160);
  }

  .pc-none {
    display: block !important;
  }

  .sp-none {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  :where(.stf-main) {
    --board: 390;
    --max: 9999px;
  }
}