@charset "UTF-8";

/*-------------------------
  グローバル
-------------------------*/
section .container{
  width: 960px;
  padding: 0;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  section .container{
    width: 90%;
  }
}

small.anno {
  display: block;
  text-indent: -1em;
  padding-left: 1em;
  font-size: 0.8em;
  line-height: 1.2;
  margin: 2px 0;
}

/*-------------------------
  ボタン
-------------------------*/
/* ボタン矢印 */
.green_btn:before,
.pink_btn:before {
  content: "";
  position: absolute;
  width: .6em;
  height: .6em;
  border-style: solid;
  border-color: #fff;
  border-bottom: 0;
  border-left: 0;
  transform: rotate(45deg) translateY(-50%);
}
/* /ボタン矢印 */

/*---------- 緑ボタン ----------*/
.green_btn {
  position: relative;
  display: block;
  width: 475px;
  font-size: 24px;
  letter-spacing: .1em;
  font-weight: bold;
  text-align: center;
  text-decoration: none !important;
  background: linear-gradient(180deg, #8fc31f 0, #61b118);
  color: #fff !important;
  padding: 1em 0 1em 1.5em;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 2px 2px 3px rgb(164 164 164 / 50%);
  box-sizing: border-box;
  transition-duration: .3s;
}

.green_btn:before {
  top: 47%;
  left: .4em;
  border-width: 3px;
}

@media screen and (max-width: 640px) {
  .green_btn {
    width: 100%;
    max-width: 600px;
    font-size: 5vw;
    background: #75B52D;
    padding: 1em 0 .8em 1.5em;
    box-shadow: 0 5px 0 #62832d;
    border-radius: 50em;
  }
  .green_btn:before {
    top: 48%;
    left: 1em;
  }
}

@media screen and (min-width: 641px) {
  .green_btn:hover {
    opacity: .7;
  }
}
/*---------- /緑ボタン ----------*/

/*---------- ピンクボタン ----------*/
.pink_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 360px;
  height: 54px;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  background: #fa4e9e;
  color: #fff !important;
  border-radius: 50em;
  padding: 0em 0 0em 1.2em;
  margin: 0 auto;
  box-sizing: border-box;
  transition-duration: .3s;
}

.pink_btn:before {
  top: 45%;
  left: 0.8em;
  border-width: 2px;
}

@media screen and (max-width: 640px) {
  .pink_btn {
    width: 80%;
    max-width: 600px;
    height: 14vw;
    font-size: 4vw;
    padding: 1.2em 0 1em 1.5em;
  }

  .pink_btn:before {
    left: 1em;
  }
  /* ボタン2行 */
  .pink_btn.btn_row2 {
    font-size: 3.7vw;
  }
  /* /ボタン2行 */
}

@media screen and (min-width: 641px) {
  .pink_btn:hover {
    opacity: .7;
  }
}
/*---------- /ピンクボタン ----------*/

/*---------- 反転ピンクボタン ----------*/
.pink_btn.invert {
  border: 3px solid #fa4e9e;
  background: #fff;
  color: #fa4e9e !important;
  font-weight: bold;
}

.pink_btn.invert:before {
  border-color: #fa4e9e;
}
/*---------- /反転ピンクボタン ----------*/