:root {
  --color-red: #a82828;
  --color-blue: #2839a8;
  --color-yellow: #dba01f;
  --color-green: #319041;
  --color-orange: #fe7522;
  --color-light-green: #62bc92;
  --color-light-red: #e11313;

  --color-text: #232323;

  --button-height: 1.75rem;

  --header-height: 125px;
  --header-height-min: 80px;
  --margin-side: 18.4%;
  --margin-side-contents: 23.6%;
}


.pb0 { padding-bottom:0px!important;}


/* フォント */
.bold {
  font-weight: bold;
}

.font-l {
  font-size: 1.14rem !important;
}

.font-3xl {
  font-size: min(2.28rem, 2.95vw) !important;
}

.button-banner[data-type="gray-outline"] {
  color: var(--color-text);
  border: 10px solid lightgray;
  background-color: white;
}

.button-banner[data-type="gray-outline"]::after {
  right: calc(var(--arrow-right) - 10px);
  border-top: 3px solid var(--color-green);
  border-right: 3px solid var(--color-green);
}

.banner-group1 .button-banner {
  margin: 40px auto 20px;
  max-width:500px;
}

.button-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 19vw;
  min-height: 60px;
  max-height: 150px;
  padding: 0 30px 0 15px;
  transition: 0.3s;
  text-align: center;
  text-decoration: none;
  word-wrap: break-word;
  color: var(--color-text);
  background-color: white;

  --arrow-right: 20px;
}

.button-banner::after {
  position: absolute;
  right: var(--arrow-right);
  width: 15px;
  height: 15px;
  content: '';
  transform: rotate(45deg);
  border-top: 3px solid white;
  border-right: 3px solid white;
}

.button-banner.arrow-left::after {
  right: unset;
  left: var(--arrow-right);
  transform: rotate(225deg);
}
/*1月20日(火) */
.button-banner-ex {
  height: auto;
}
.sp-only { display: none; }

 .font-l-ex {
display:block;
 flex-basis: 100%;
line-height: 1.2;
margin-top:0.5rem;
}

 .font-3xl-ex {
line-height:2.6rem;
}

.button-banner-ex {
 padding:0.5rem 0;
}