@charset "UTF-8";
:root {
  /* Colors */
  --color-main: #006846;
  --color-sub: #80ba27;
  --color-font: #333;
  --color-gray: #616161;
  --color-light-gray: #e0e0e0;
  --color-light-gray-02: #ebebeb;
  --color-bg-gray: #f5f5f5;
  --color-bg-light-gray: #fafafa;
  --color-bg-green: #edf3e1;
  --color-bg-yellow: #fbf4dd;
  --color-bg-red: #fdf7f6;
  --color-bg-blue: #e6f0ed;
  --color-bg-violet: #e0d5e4;
  --color-important: #ed7270;
  --color-hover: #00a871;
  /* Dimensions */
  --breakpoint: 767px;
  --width-content-max: 1120px;
  --width-btn-max: 350px;
  --gutter: 16px;
  --gutter-ls: 24px;
  --gutter-content: 16px;
  --font-size: 1.4rem;
  --font-size-ls: 1.7rem;
  --line-height: 1.5;
  /* Other */
  --font-family: Yugothic, Winyugothic, "ヒラギノ角ゴProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  --font-weight: 400;
  --font-weight-bold: 700;
  --transition-timing-function: ease;
  --transition-duration: .3s;
  --z-index-overlay: 7000;
  --z-index-header: 5000;
  --z-index-fixed-link: 3000;
  --z-index-layer2: 10;
  --z-index-layer1: 5;
  --z-index-behind: -1;
  --box-shadow: 0 0 10px rgba(88, 132, 118, 0.1);
}

/* ----------------------------------------------------------------
    Selincro (.selincro-*)
----------------------------------------------------------------- */
.selincro-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 8px;
  padding: 12px 35px 12px 12px;
  border-radius: 10px;
  color: var(--color-font);
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  transition: background-color var(--transition-timing-function) var(--transition-duration);
  background: var(--color-bg-light-gray);
  border: solid 1px var(--color-light-gray);
}
@media only screen and (min-width: 767px) {
  .selincro-btn {
    align-items: center;
    gap: 16px;
    padding: 20px 35px 20px 24px;
    flex-direction: row;
  }
}
.selincro-btn-area {
  display: grid;
  gap: 8px;
  margin-block: 40px;
}
@media only screen and (min-width: 767px) {
  .selincro-btn-area {
    gap: 16px;
    margin-block-start: 24px;
  }
}
.selincro-btn_item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.selincro-btn:not(.-disabled):hover, .selincro-btn:not(.-disabled):active, .selincro-btn:not(.-disabled):focus-visible {
  background: var(--color-bg-green);
}
.selincro-btn.-color-02 {
  background: var(--color-bg-red);
  border: solid 2px var(--color-important);
}
.selincro-btn.-color-02:not(.-disabled):hover, .selincro-btn.-color-02:not(.-disabled):active, .selincro-btn.-color-02:not(.-disabled):focus-visible {
  background: #f8e6e3;
}
.selincro-btn_label {
  background-color: var(--color-sub);
  border-radius: 23px;
  color: #fff;
  font-size: 13px;
  padding: 4px 16px;
  max-width: 104px;
  flex-shrink: 0;
}
@media only screen and (min-width: 767px) {
  .selincro-btn_label {
    max-width: 144px;
    padding: 10px 27px;
    font-size: 16px;
  }
}
.selincro-btn_label.-color-02 {
  background-color: var(--color-important);
}
.selincro-btn_title {
  font-size: 18px;
  text-align: left;
}
@media only screen and (min-width: 767px) {
  .selincro-btn_title {
    font-size: 24px;
  }
}
.selincro-btn_icon {
  position: absolute;
  inset: 0 20px 0 auto;
  display: flex;
  align-items: center;
  margin: auto;
}

/*
.modal-video-play-btn
----------------------------------------------- */
.modal-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: var(--box-shadow);
  border: solid 1px #e0e0e0;
  z-index: 100;
}

.modal-video-play-btn::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-color: transparent transparent transparent #006846;
  border-width: 15px 0 15px 25px;
}

.modal-video-play-btn.btn-hidden {
  display: none;
}

.modal-video-play-btn:hover,
.modal-video-play-btn:active,
.modal-video-play-btn:focus-visible {
  background: var(--color-bg-green);
}