@charset "Shift_JIS";

.hidden {
  overflow: hidden;
}

.heading_01 {
  margin-bottom: 2em;
  font-size: 20px;
  text-align: center;
}
.heading_02 {
  margin-bottom: 1.5em;
  padding-bottom: 0.5em;
  color: #1c2569;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #1c2569;
}
@media screen and (max-width: 599px) {
  .heading_01 {
    font-size: 18px;
  }
}

.btn_01 {
  display: block;
  position: relative;
  width: 100%;
  padding: 0.75em 25px 0.75em 0.5em;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 1.4;
}
.btn_01::after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215.642%22%20height%3D%2214%22%20viewBox%3D%220%200%2015.642%2014%22%3E%3Cg%20transform%3D%22translate(0.5%200.5)%22%3E%3Cpath%20d%3D%22M-.5-.5H11.037V9.668H-.5ZM10.037.5H.5V8.668h9.537Z%22%20transform%3D%22translate(4.105)%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M316.437%2C283.532H304.9V273.5h2.689v1H305.9v8.032h9.537v-1.416h1Z%22%20transform%3D%22translate(-305.4%20-270.032)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: center;
  content: '';
}
.btn_01:hover {
  opacity: 0.8;
}
.btn_01.black {
  background: #000;
}
.btn_01.green {
  background: #39cd00;
}
.btn_01.pink {
  background: #e21899;
}
.btn_01.blue {
  background: #3b5998;
}
.btn_01.red {
  background: #f50204;
}
.btn_02 {
  display: block;
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0.8em 25px 0.8em 0.5em;
  background: #fff;
  border: 1px solid #1c2569;
  border-radius: 5px;
  color: #1c2569;
  font-size: 16px;
  text-align: center;
  line-height: 1.4;
}
.btn_02::after {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 1px solid #1c2569;
  border-right: 1px solid #1c2569;
  content: '';
}
.btn_02:hover {
  opacity: 0.8;
}

.lead {
  max-width: 1000px;
  margin: auto;
  margin-bottom: 1.5em;
  font-size: 16px;
}
@media screen and (max-width: 599px) {
  .lead {
    font-size: 14px;
  }
}

.list_indent_no li {
  padding-left: 1.3em;
  text-indent: -1.3em;
}

/* ------------------------------
sns list
------------------------------ */
.wrap_sns {
  width: 100%;
  padding: 35px 20% 45px;
  background: #f4f5f7;
}
@media screen and (max-width: 899px) {
  .wrap_sns {
    padding: 35px 5% 45px;
  }
}
@media screen and (max-width: 599px) {
  .wrap_sns {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 25px 4% 30px;
  }
}
.list_sns li {
  padding: 20px 2.5% 25px;
  background: #fff;
  border: 1px solid #ccc;
}
.list_sns .sns_head {
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
  margin-bottom: 20px;
}
.list_sns .sns_head .ico_sns {
  margin-top: 0.5em;
}
.list_sns .sns_head .ico_sns img {
  width: 35px;
}
.list_sns .sns_head .ico_sns .fb {
  margin-left: 9px;
}
.list_sns .sns_head .ico_sns .youtube {
  width: 43px;
  height: auto;
}
.list_sns .sns_head h3 {
  font-size: 16px;
  font-weight: bold;
}
.list_sns p {
  font-size: 14px;
}
.list_sns .btn_01 {
  margin-top: 18px;
}
.wrap_sns .btn_02 {
  margin-top: 40px;
}
@media screen and (min-width: 600px) {
  .list_sns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .list_sns li {
    display: flex;
    flex-direction: column;
    width: 48.2%;
  }
  .list_sns li:nth-child(n + 3) {
    margin-top: 25px;
  }
  .list_sns p {
    height: 100%;
  }
}
@media screen and (max-width: 599px) {
  .list_sns li {
    padding: 20px 5% 25px;
  }
  .list_sns li + li {
    margin-top: 25px;
  }
  .wrap_sns .btn_02 {
    margin-top: 25px;
  }
}

/* ------------------------------
guidelines
------------------------------ */
.guidelines_main {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 92%;
  max-width: 860px;
  max-height: 80%;
  padding: 40px 3.5%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
  line-height: 2;
  overflow-y: scroll;
}
.guidelines_main h4 {
  margin-top: 1.5em;
  font-weight: bold;
}
@media screen and (max-width: 599px) {
  .guidelines_main {
    padding: 25px 4%;
  }
}

/* ------------------------------
modal
------------------------------ */
.modal_wrap {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 100%;
  height: 100vh;
}
.modal_wrap .modal_bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
}
.btn_close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 38px;
  height: 38px;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.btn_close span {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.btn_close span::before,
.btn_close span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #333;
  border-radius: 9999px;
  content: '';
}
.btn_close span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.btn_close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}