@charset "utf-8";

img {
  width: 100%;
}

ul{
  margin: 0;
  padding: 0;
}

li{
  list-style: none;
}


.present_top_contetns {
  padding: 40px 24px 40px;
  
}

.present_top_title {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
   line-height: 30px;
margin: 36px 0 32px;
}
.present_top_tx {
  display: inline-block;
  text-align: left;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
 
}

.present_top_tx ul{
    margin: 32px 0px 32px;
    background-color: rgb(247 247 247);
    padding: 16px 14px 10px 32px;
}
.present_top_tx ul li{
  font-size: 13px;
  padding-bottom: 8px;
  text-indent: -1rem;
  line-height: 16px;
}


.top_button {
border: 1px solid #3b8c45;
margin: 46px auto 8px;
    border-radius: 42px;
    text-align: center;
    padding: 10px 28px;
    width: fit-content;
}

.top_button span {
  font-size: 12px;
}

.top_button a {
  display: inline-block;
  color: #3b8c45;
  font-weight: 700;
}

.top_date {
  text-align: center;
  background: #3b8c45;
  padding: 14px 20px;
  font-size: 22px;
  color: #fff;
  line-height: 32px;
}

.present_img{
  margin-top: 16px;
}

.present_center_contents {
  background: #ecf3e2;
}

.present_center_contents {
  padding: 56px 24px;
}

.present_button_flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: center;
}

.present_button {
/* 
  padding: 10px;
border-width: 1px 1px 0px 1px;
    border-style: solid;
    border: solid 1px #3b8c45;
    border-radius: 0.75em 0.75em 0px 0px; */
  position: relative;
border-bottom: 2px solid #3b8c45;
padding: 10px;
width: 80%;
text-align: center;
}


.present_button:before,
.present_button:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}

.present_button:before {
border: 12px solid transparent;
border-top: 12px solid#3b8c45;
}

.present_button:after {
border: solid 14px transparent;
border-top: solid 14px #ecf3e2;
margin-top: -5px;
}

.balloon p {
margin: 0;
padding: 0;
}

.present_button a {
  color: #3b8c45;
  font-weight: 700;
  font-size: 17px;
}

.present_items {
}

.present_center_contents_title {
  text-align: center;
  font-size: 28px;
  color: #3b8c45;
  width: fit-content;
  margin: 0 auto 46px;
  font-weight: 700;
}

.step_title{
  margin: 0 auto;
}

.labe_text span {
  font-size: 12px;
  line-height: 16px;
  display: inline-block;
  letter-spacing: 0;
  text-indent: -1rem;
  padding-left: 20px;
}

.present_flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 30px 0 60px;
}

.present_item_img {
  margin: 30px auto;
}

.present_item {
  margin-bottom: 60px;
}

.present_item_copy{
      margin: 16px 0;
}

.present_item_tx ul{
    margin: 32px 0px 32px;
    background-color: #dfe9d0;
padding: 16px 14px 10px 32px;
}
.present_item_tx ul li{
  font-size: 13px;
  padding-bottom: 8px;
  text-indent: -1rem;
  line-height: 16px;
}

.present_item_button {
    background: #3d8940;
    font-size: 14px;
    max-width: 148px;
    border-radius: 30px;
    margin: 0 auto;
    padding: 8px 0;
    text-align: center;
    color: #fff;
}


.present_item_button a {
  display: inline-block;
  color: #fff;
}

/* ---------------
モーダルウィンドウ 
-----------------*/

.modal {
  display: none;
  position: fixed;
  z-index: 8887;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(85, 85, 85, 0.9);
  transition: all 1s ease-in-out;
  overflow-y: auto;
  overscroll-behavior-y: none;
}

.modal-container_1 {
padding: 36px 24px;
    border: 1px solid rgb(191 191 191);
    border-radius: 8px;
    margin: 24px;
}


.content_2{
    height: 80%;
}

.modal_title {
text-align: center;
    font-size: 18px;
    color: #3b8c45;
    padding-bottom: 24px;
    font-weight: 700;
}

.modal_item{
margin-top: 24px;
text-align: center;

}

.name_button{
    font-size: 16px;
    display: inline-block;
    border-bottom: 1px solid #3b8c45;
}

.modal_stage{
    text-align: left;
    line-height: 24px;
    padding: 0 10px;
}
.modal_stage span{
    font-size: 12px;
    display: block;
padding: 16px 16px 16px 28px;
    line-height: 16px;
    background-color: rgb(247 247 247);
        margin-top: 16px;
}
.modal_stage table td{
  padding-right: 10px;

}

.modal_tex{
  margin-bottom: 30px;
  line-height: 18px;
}
.modal_tex span{
 display: inline-block;
 border-bottom: 2px solid #3b8c45;
 font-size: 18px;
 margin-bottom: 10px;
}



.modal-content {
  background: #fff;
  overflow-y: auto;
  width: 90%;
    max-width: 456px;
  /* max-width: 372px; */
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: show 0.5s linear 0s;
  /* filter: drop-shadow(0px 2px 6px #777); */

}




.modal_annotation{
  margin: 0 16px;
  padding: 0;
  font-size: 14px;
}
.modal_annotation li{
    text-indent: -1rem;
    padding-bottom: 10px;
    font-size: 12px;
    line-height: 16px;
}

.modal-top {
  /* border: 1px solid #000; */
  padding: 1px 6px;
  /* width: 71px; */
  margin: 24px auto 0;
  text-align: center;
  font-size: 20px;
  position: relative;
  z-index: 100;
  top: 87%;
  /* background: #fff; */
}

.modal-close {
  color: #fff;
  text-decoration: underline;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 16px;
  font-weight: 700;
}

.modal-close:hover,
.modal-close:focus {
  text-decoration: none;
  cursor: pointer;
}

.modal-title {
  color: #fff;
}
.modal_howto_text {
  padding: 16px;
  background: #efefef;
  margin: 28px 0 42px;
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.nonScroll {
  height: calc(1vh + 1px);
  width: 1px;
  background-color: transparent;
} /*# sourceMappingURL=style.css.map */

.modal_point_title {
  padding: 30px 16px;
  text-align: center;
  font-weight: 700;
}

/* ---------------
label
-----------------*/

.label_flex {
  margin: 30px auto 15px;
  display: grid;
  grid-template-columns: 80px 1fr;
  box-sizing: border-box;
  position: relative;
  align-items: center;

}

.label_ribon{
  margin: 0;
  padding: 10px 0;
  z-index: 2;
  width: 70px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background:#b50a2a;
   height: 50px;
   position: relative;
}

.ribon_a{
padding: 20px 0 0;
}

.label_ribon::after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-left: 35px solid #b50a2a;
  border-right: 35px solid#b50a2a;
  border-bottom: 10px solid transparent;
  left: 0px;
  bottom: -9px;
}

.label_title{
font-size: 20px;
    padding-top: 2px;
}
.label_title span{
font-size: 16px;
}


.labe_text {
  font-size: 17px;
  font-weight: 700;
}

.labe_text ul {
  margin: 0;
  padding: 0;

}
.labe_text ul li {
  font-size: 12px;
  text-indent: -1rem;
  padding-left: 16px;
    font-weight: normal;
    line-height: 16px;
    margin-bottom: 6px;
}

/* ---------
step
------- */

.step {
  margin: 60px 24px;
}

.step_item{
 padding: 24px 0 0;
}

.step_2{
  padding-top:50px;
}

.triangle{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid#3b8c45;
margin:0 auto;
}


.step_item p{
    text-align: center;
    font-size: 18px;
    margin: 32px auto 48px;
}

.step_item_img{
  margin-bottom: 30px;
}

.button_wrapper{
    margin: auto ;
    position: fixed;
    bottom: 0;
    background-color: RGB(255, 255, 255, 0.85);
    padding: 16px 0 8px;
    z-index: 1000;
max-width: 493px;
    width: 100%;
}

.step_item_title {
  text-align: center;
  font-weight: 700;

  font-size: 20px;
  color: #3b8c45;
}

.step_number{
  padding: 5px 20px;
  border: 1px solid #3b8c45;
  border-radius: 5px;
  color: #3b8c45;
  margin: 0 auto 32px;
  font-size: 18px;
  letter-spacing: 3px;
  background: #ecf3e2;
}
.step_number span{display: inline-block;
font-size: 26px;
}

.number {
border: 1px solid #3b8c45;
    color: #3b8c45;
    border-radius: 30px;
    padding: 5px 20px;
    width: fit-content;
    margin: 0 auto;
    font-size: 18px;
    letter-spacing: 3px;
}


.step_tx {
  padding: 16px 0;
  text-align: center;
  font-weight: 700;
}

.step_tx a{
  text-decoration: underline;
}

.step_annotation{
  margin: 0;
  background-color: rgb(247 247 247);
  padding: 16px 14px 10px 16px;
  margin-top: 32px;
margin-bottom:32px;
letter-spacing: -0.5px;
}

.step_annotation li{
list-style: none;
font-size: 12px;
text-indent: -1rem;
padding-left: 16px;
line-height: 20px;
margin-bottom: 4px;
}


/* ---------
entry
------- */

.entry_tx{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
}
.entry_tx span{
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.entry_button{
  border-radius: 5px;
  font-size: 20px;
  text-align: center;
    background: #b50a2a;
    font-size: 17px;
    margin: 0px auto 6px;
    padding: 12px 0px;
    border-radius: 50px;
    max-width: 240px;
}

.entry_button:hover{
  opacity: 0.8;
}

.entry_button a{
display: inline-block;
  color: #fff;
  font-weight: 700;

}

/* ---------
perform
------- */

.perform{
  padding: 40px 24px;
  background: #ecf3e2;
}

.perform_title{
  margin-bottom: 30px;
}

.perform_annotation{
  margin: 0;
  padding: 0;
}

.perform_annotation li{
list-style: none;
text-indent: -1rem;
padding-left: 16px;
}

.perform_button a{
  text-decoration: underline;
  display: inline-block;
  color: #3b8c45;
  font-weight: 700;
  margin: 20px 16px 0;
}

/* ---------
chance
------- */
.chance {
  background: #fff;
  padding: 40px 20px;
}

.chance_title {
  width: fit-content;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  border-bottom: 1px solid #fff001;;
margin: auto;
}
.chance_title span{
  font-size: 24px;
}

.chance_tx {
  padding-top: 20px;
}
.chance_tx span {
  font-weight: 700;
}

.chance_annotation {
  font-size: 12px;
  margin: 0;
  background-color: rgb(247 247 247);
  padding:16px 14px 10px 32px;;
  list-style: none;
  margin: 32px auto 0;


}
.chance_annotation li {
  text-indent: -1rem;
}


/* ---------
notes
------- */

.notes{
  padding: 30px 24px 30px 24px;
  font-size: 12px;
  line-height: 18px;
}
.notes_ul,.notes_inner{
  margin: 0;
  padding: 0;
}

.note_inner{
  padding-left: 22px;
}
.notes_ul li{
list-style: none;
text-indent: -1rem;
padding-left: 16px;
margin-bottom: 6px;
}

.none{
  margin-bottom: 0 !important;
}

.notes_ul li a{
  text-decoration: underline;
}

.notes_title{
  display: block;
  padding: 14px 0;
  font-weight: 700;
}

.notes_sub_title{
  padding: 14px 0 6px;
  font-weight: 700;
display: block;
}