/* color */
:root{
  --color-magenta: #B60081;
  --color-text: #533A29;
  --color-white: #ffffff;
  
  --color-highschool: #DCA008;
  --color-highschool-sub: #F0BB17;

  --color-leaders: #29237B;
  --color-leaders-sub: #B7A8FC;

  --transition: all ease-in 0.2s;
}

/* common */
.pc{
  display: block;
}
.sp{
  display: none;
}
@media (max-width: 960px){
  .pc{
    display: none;
  }

  .sp{
    display: block;
  }
}

body.active, html.active{
  overflow: hidden;
}

button{
  background: none;
  border: none;
}

/* .select_lang{
  display: none;
} */

/* .theme h1{
  font-weight: 900;
} */

#modal_contens{
  letter-spacing: 0.05em;
  line-height: 1.5;
  font-weight: 500;
}

/* main{
  padding-top: 0;
  background-color: #F9F7F5;
} */

.inner{
  width: 90%;
}
@media (max-width: 960px){
  .inner{
    width: 92% !important;
  }
}

.section{
  padding-top: 120px;
  margin-top: -120px;
}
@media (max-width: 960px){
  .section:not(.water .section){
    padding-top: 0;
    margin-top: 0;
  }
}

.section:not(:last-of-type){
  margin-bottom: 80px;
}
@media (max-width: 960px){
  .section:not(:last-of-type){
    margin-bottom: 32px;
  }
}

.section_inner{
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 64px 4%;
}
@media (max-width: 960px){
  .section_inner{
    border-radius: 8px;
    padding: 32px 16px;
  }
}
/* 
.section_title{
  text-align: center;
  margin: 0 0 40px !important;
  padding-left: 0 !important;
  padding-bottom: 24px;
  font-size: 40px !important;
  color: var(--color-highschool);
}

.section_title.section_title--leaders{
  color: var(--color-leaders);
}

.section_title.section_title--unicefcp{
  color: var(--color-magenta);
}
@media (max-width: 960px){
  .section_title{
    font-size: 24px !important;
    margin: 0 0 32px !important;
  }
}

.section_title::before{
  width: 64px !important;
  height: 6px !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%);
  background-color: var(--color-highschool-sub) !important;
}

.section_title.section_title--leaders::before{
  background-color: var(--color-leaders) !important;
}

.section_title.section_title--unicefcp::before{
  background-color: var(--color-magenta) !important;
}
@media (max-width: 960px){
  .section_title::before{
    width: 48px !important;
  }
} */

.section_text{
  font-size: 18px;
  text-align: center;
  line-height: 1.8;
}
@media (max-width: 960px){
  .section_text{
    font-size: 16px;
  }

  .section_text.section_text--unicefcp{
    text-align: left;
  }
}

p{
  margin: 0;
}

img{
  width: 100%;
  vertical-align: bottom;
}

.description{
  font-size: 18px;
}

.guide_content.guide_content--leaders .description{
  font-size: 16px;
}
@media (max-width: 960px){
  .description{
    font-size: 16px;
  }

  .description:not(:last-of-type){
    margin-bottom: 8px;
  }
}

.description strong{
  font-size: 20px;
}

.description.description--big strong{
  font-size: 24px;
}
@media (max-width: 960px){
  .description strong{
    font-size: 16px;
  }

  .description.description--big strong{
    font-size: 18px;
  }
}

.pagetop{
  display: none !important;
}

/* MV */
.main_visual{
  margin-bottom: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 960px){
  .main_visual{
    margin-bottom: 32px;
  }
}

/* button */
.button_wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
@media (max-width: 960px){
  .button_wrap{
    flex-direction: column;
    gap: 32px;
  }
}

.button_wrap .button_link{
  margin: 0;
}

.button_item#application{
  padding-top: 200px;
  margin-top: -200px;
}

.button_item{
  max-width: 320px;
  width: 100%;
}
@media (max-width: 960px){
  .button_item{
    max-width: 280px;
  }
}

.button_link{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-highschool);
  border-radius: 16px;
  font-size: 22px;
  text-align: center;
  color: var(--color-white);
  margin: 0 auto;
  padding: 12px 24px;
  position: relative;
  transition: var(--transition);
}

.button_wrap.button_wrap--leaders .button_link{
  background-color: var(--color-leaders);
}

@media (max-width: 960px){
  .button_link{
    font-size: 18px;
  }
}

.button_link::after,
.button_list_link::after{
  content: "";
  position: absolute;
  border-top: 2px solid;
  border-right: 2px solid;
  border-color: var(--color-white);
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
  right: 24px;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.button_link--download::after{
  background-image: url(../images/entry/icon_download.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  right: 16px;
  border: unset;
  top: 50%;
  transform: translateY(-50%);
  bottom: unset;
  margin: 0;
}

/* header */
/* .header_back_color{
  position: inherit;
} */
/* notice */
.notice{
  background: var(--color-white);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  z-index: 0;
  margin-bottom: 40px;
}
@media (max-width: 960px){
  .notice{
      flex-direction: column;
      gap: 24px;
  }
}

.notice_title{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.notice_title::before{
  content: "";
  mask-image: url(../images/entry/icon_notice.svg);
  mask-repeat: no-repeat;
  background: var(--color-highschool);
  width: 36px;
  height: 36px;
  display: block;
}

.notice_list{
  width: calc((100% - 48px) - 30%);
  padding: 0;
  margin: 0;
}
@media (max-width: 960px){
  .notice_list{
      width: 100%;
  }
}

.notice_content{
  border-bottom: 2px dashed #DFDAD4;
  padding: 12px 0;
}
@media (max-width: 960px){
  .notice_content{
      padding: 8px;
  }
}

.notice_content:last-child{
  border-bottom: none;
}

.notice_content,
.notice_link{
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 960px){
  .notice_content,
  .notice_link{
      align-items: flex-start;
      flex-direction: column;
      gap: 2px;
  }
}

.notice_link .notice_text{
  text-decoration: underline;
}

.notice_link--externallink .notice_text{
  position: relative;
  padding-right: 24px;
}

.notice_link--externallink .notice_text::after{
  content: "";
  position: absolute;
  mask-image: url(../images/youth/eco/boshuu/icon_externallink.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background: #533A29;
  width: 18px;
  height: 18px;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto 0;
}

.notice_date{
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 18px;
  white-space: nowrap;
  display: inline-block;
  min-width: 90px;
}
@media (max-width: 960px){
  .notice_date{
      font-size: 15px;
      min-width: unset;
  }
}

.notice_text{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
@media (max-width: 960px){
  .notice_text{
      font-size: 14px;
  }
}

/* menu */
.menu_area{
  position: sticky;
  top: 40px;
  z-index: 999;
}
@media (max-width: 960px){
  .menu_area{
    position: fixed;
    top: unset;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-top: 1px solid #D8D8DB;
    background-color: var(--color-white);
  }
}

.menu_list{
  max-width: 820px;
  margin: 0 auto 40px;
  padding: 0;
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 960px){
  .menu_list{
    margin: 0 auto;
    width: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .menu_list--3{
    grid-template-columns: repeat(3, 1fr);
  }
}

.menu_item{
  background-color: var(--color-white);
  flex: auto;
  box-shadow: 0 2px 4px rgb(0, 0, 0, 0.03);
}

@media (max-width: 960px){
  .menu_item{
    background-color: unset;
    min-width: 84px;
    width: auto;
    box-shadow: unset;
    height: 100%;
  }

  .menu_item img{
    max-width: 24px;
  }

  .menu_item.menu_item--secondary{
    min-width: 112px;
  }

  .menu_item.menu_item--secondary a{
    font-size: 11px;
  }

  .menu_list--3 .menu_item{
    min-width: 110px;
    width: auto;
  }
}

.menu_item:not(:last-of-type){
  border-right: 1px solid #DFDAD4;
}

.menu_item:first-of-type{
  border-radius: 32px 0 0 32px;
}

.menu_item:last-of-type{
  border-radius: 0 32px 32px 0;
}
@media (max-width: 960px){

  .menu_item:first-of-type,
  .menu_item:last-of-type{
    border-radius: 0;
  }
}

.menu_item a{
  font-size: 15px;
  position: relative;
  padding: 20px 4%;
  display: block;
  text-align: center;
  line-height: 1;
  font-weight: bold;
  transition: var(--transition);
}
@media (max-width: 960px){
  .menu_item a{
    padding: 14px 6px;
    font-size: 12px;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

.menu_item a:hover{
  color: var(--color-highschool-sub);
  opacity: 1;
}

.menu_area.menu_area--leaders .menu_item a:hover{
  color: var(--color-leaders-sub);
}

.menu_area.menu_area--unicefcp .menu_item a:hover{
  color: var(--color-magenta);
}

.menu_item a::after{
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #533A29;
  border-right: 2px solid #533A29;
  display: inline-block;
  transform: translateY(-4px) rotate(135deg);
  margin: 0 0 0 8px;
  transition: var(--transition);
}

.menu_item a:hover::after{
  border-top: 2px solid var(--color-highschool-sub);
  border-right: 2px solid var(--color-highschool-sub);
}

.menu_area.menu_area--leaders .menu_item a:hover::after{
  border-top: 2px solid var(--color-leaders-sub);
  border-right: 2px solid var(--color-leaders-sub);
}

.menu_area.menu_area--unicefcp .menu_item a:hover::after{
  border-top: 2px solid var(--color-magenta);
  border-right: 2px solid var(--color-magenta);
}
@media (max-width: 960px){
  .menu_item a::after{
    content: none;
  }
}

/* about */
.about_text{
  font-size: 20px;
  text-align: center;
  font-weight: 700;
  line-height: 1.8;
}
@media (max-width: 960px){
  .about_text{
    font-size: 18px;
  }
}

.about_content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
@media (max-width: 960px){
  .about_content{
    gap: 20px;
  }
}

.about_content img{
  max-width: 900px;
}

.about_block{
  background-color: #F9F7F5;
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  max-width: 900px;
}
@media (max-width: 960px){
  .about_block{
    padding: 12px;
  }
}

.youtube_link{
  transition: var(--transition);
}

.youtube{
  position: relative;
}

.youtube_play{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
}

.about_link{
  color: var(--color-highschool);
  font-weight: 700;
  position: relative;
  transition: var(--transition);
}

.about_link.about_link--leaders{
  color: var(--color-leaders);
}

.about_link::after{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../images/entry/icon_arrowright.png);
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -20px;
}

.about_link.about_link--leaders::after{
  background-image: url(../images/entry/icon_leaders_arrowright.png);
}

/* guide */
.guide_content{
  margin-bottom: 40px;
}
@media (max-width: 960px){
  .guide_content{
    margin-bottom: 32px;
  }
}

.heading_block{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
@media (max-width: 960px){
  .heading_block{
    gap: 8px;
  }

  .heading_block--column{
    flex-direction: column;
  }
}

.heading_block_cat{
  background-color: var(--color-highschool-sub);
  color: var(--color-white);
  padding: 8px;
  font-size: 16px;
  line-height: 1.4;
  border-radius: 8px;
}

.contact_box.contact_box--leaders .heading_block_cat{
  background-color: var(--color-leaders-sub);
}

.contact_box.contact_box--unicefcp .heading_block_cat{
  background-color: var(--color-magenta);
}

.heading_block.heading_block--leaders .heading_block_cat{
  background-color: var(--color-leaders-sub);
}
@media (max-width: 960px){
  .heading_block_cat{
    padding: 2px 6px;
    font-size: 14px;
    border-radius: 4px;
  }
}

.heading_block_text{
  font-size: 24px;
  display: flex;
  align-items: center;
  font-weight: 700;
}
@media (max-width: 960px){
  .heading_block_text{
    font-size: 14px;
    flex-direction: column;
    text-align: center;
  }
}

.heading_block_text strong{
  font-size: 40px;
}

.heading_block_text.heading_block_text--mail strong{
  font-size: 26px;
}
@media (max-width: 960px){
  .heading_block_text strong,
  .heading_block_text.heading_block_text--mail strong{
    font-size: 24px;
  }
}

.heading_block_text small{
  font-size: 20px;
}
@media (max-width: 960px){
  .heading_block_text small{
    font-size: 14px;
  }
}

.guide_wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
@media (max-width: 960px){
  .guide_wrap{
    display: block;
  }
}

.guide_title,
.guide_data{
  border-bottom: 2px dashed #D8D8DB;
}

.guide_title{
  width: 17%;
  padding: 40px 10px 40px 2%;
}
@media (max-width: 960px){
  .guide_title{
    width: 100%;
    border-bottom: none;
    padding: 32px 0 0;
    margin-bottom: 16px;
  }
}

.guide_title_content{
  background-color: var(--color-highschool-sub);
  padding: 10px 32px 10px 16px;
  font-size: clamp(14px, 1.6vw, 20px);
  line-height: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
}

.guide_content.guide_content--leaders .guide_title_content{
  background-color: var(--color-leaders-sub);
}

.guide_content.guide_content--unicefcp .guide_title_content{
  background-color: var(--color-magenta);
  color: var(--color-white);
}
@media (max-width: 960px){
  .guide_title_content{
    padding: 8px 18px 8px 8px;
    width: fit-content;
  }
}

.guide_data{
  width: 76%;
  padding: 40px 2% 40px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
@media (max-width: 960px){
  .guide_data{
    width: 100%;
    padding: 0 0 32px;
  }
}

.guide_primary_dot_list{
  list-style-type: disc;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 16px;
}
@media (max-width: 960px){
  .guide_primary_dot_list{
    gap: 24px;
  }
}

.guide_primary_dot_item::marker{
  color: var(--color-highschool-sub);
  font-size: 1em;
}

.guide_content.guide_content--leaders .guide_primary_dot_item::marker{
  color: var(--color-leaders-sub);
}

.guide_primary_dot_item{
  font-size: 20px;
  font-weight: 700;
}

.guide_content.guide_content--leaders .guide_primary_dot_item{
  font-weight: 500;
  font-size: 16px;
}

.guide_secondary_dot_list{
  list-style-type: disc;
  margin: 0;
  padding: 10px 0 10px 8px;
  padding-left: 16px;
}

.guide_number_item:last-child .guide_secondary_dot_list{
  padding-bottom: 0;
}

.guide_secondary_dot_item::marker{
  font-size: 0.5em;
}

.guide_secondary_dot_item{
  font-size: 18px;
  font-weight: 500;
}

.guide_content.guide_content--leaders .guide_secondary_dot_item{
  font-size: 16px;
}
@media (max-width: 960px){
  .guide_secondary_dot_item{
    font-size: 16px;
  }
}

.guide_number_list{
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
}

.guide_number_item{
  font-size: 18px;
}

.guide_content.guide_content--leaders .guide_number_item{
  font-size: 16px;
}
@media (max-width: 960px){
  .guide_number_item{
    font-size: 16px;
  }
}

.guide_panel_wrap{
  margin-bottom: 40px;
}
@media (max-width: 960px){
  .guide_panel_wrap{
    margin-bottom: 0;
  }
}

.guide_panel{
  display: none;
  padding: 20px;
  border: 1px solid #D8D8DB;
  border-radius: 0 0 8px 8px;
}
@media (max-width: 960px){
  .guide_panel{
    padding: 0 16px 16px;
  }
}

.guide_panel.active{
  display: block;
}

.guide_panel_heading{
  display: flex;
  gap: 2%;
}

.guide_panel_heading_text{
  flex: 0 1 49%;
  font-size: 20px;
  text-align: center;
  padding: 20px;
  border-right: 1px solid #D8D8DB;
  border-left: 1px solid #D8D8DB;
  border-top: 2px solid #D8D8DB;
  border-radius: 8px 8px 0 0;
  background-color: #D8D8DB;
  color: #A69A96;
  cursor: pointer;
}
@media (max-width: 960px){
  .guide_panel_heading_text{
    padding: 16px;
    font-size: 16px;
  }
}

.guide_panel_heading_text.active{
  position: relative;
  background-color: var(--color-highschool-sub);
  color: #13213C;
  cursor: inherit;
}

.guide_panel_heading_text.active span{
  z-index: 10;
  position: inherit;
  color: var(--color-highschool);
}

.guide_panel_heading_text.active::before{
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  position: absolute;
  top: 6px;
  left: 0px;
  z-index: 0;
}
@media (max-width: 960px){
  .guide_panel_heading_text.active::before{
    top: 4px;
  }
}

.guide_panel .guide_title:last-of-type,
.guide_panel .guide_data:last-of-type{
  border-bottom: unset;
}
@media (max-width: 960px){
  .guide_panel .guide_title{
    padding: 24px 0 0;
    margin-bottom: 8px;
  }

  .guide_panel .guide_data{
    padding: 0 0 24px;
  }
}

.guide_text_red{
  color: #dc1c1c;
}

.guide_text_modify{
  text-decoration: line-through;
}

.guide_text_wrap,
.story_text_wrap{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}
@media (max-width: 960px){
  .guide_text_wrap,
  .story_text_wrap{
    gap: 16px;
    margin-bottom: 16px;
  }
}

/* story */
.story_text_wrap{
  margin-bottom: 60px;
}
@media (max-width: 960px){
  .story_text_wrap{
    margin-bottom: 40px;
  }
}

.story_wrap{
  max-width: 836px;
  width: 100%;
  margin: 0 auto 60px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
  list-style: none;
  counter-reset: li;
}
@media (max-width: 960px){
  .story_wrap{
    margin-bottom: 40px;
    gap: 50px;
  }
}

.story_box{
  list-style-type: none;
  background: #F9F7F5;
  border-radius: 12px;
  border: 1px solid var(--color-magenta);
  padding: 36px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  position: relative;
}
@media (max-width: 960px){
  .story_box{
    padding: 28px 20px 18px 20px;
    gap: 20px;
  }
}

.story_box::before{
  content: counter(li);
  counter-increment: li;
  position: absolute;
  background: var(--color-magenta);
  border-radius: 50%;
  font-size: 36px;
  font-weight: 700;
  color: var(--color-white);
  width: 62px;
  height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -36px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media (max-width: 960px){
  .story_box::before{
    font-size: 24px;
    width: 42px;
    height: 42px;
    top: -23px;
  }
}

.story_box img{
  border-radius: 8px;
  max-width: 370px;
  width: 100%;
  height: auto;
}

.story_box_title_wrap{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.story_box_title{
  font-size: 18px;
  text-align: center;
}
@media (max-width: 960px){
  .story_box_title{
    font-size: 16px;
  }
}

.story_image_box,
.story_imagetext_box{
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}

.story_imagetext_box{
  align-items: center;
}
@media (max-width: 960px){
  .story_image_box,
  .story_imagetext_box{
    flex-direction: column;
    align-items: center;
  }
}

.story_box_innerlist{
  list-style-type: disc;
  padding: 0 0 0 16px;
  width: 50%;
}

@media (max-width: 960px){
  .story_box_innerlist{
    padding-left: 20px;
    width: 100%;
  }
}

/* activity */
.activity_contents{
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.activity_content{
  border: 2px solid #DFDAD4;
  border-radius: 12px;
  padding: 24px 30px;
  width: calc((100% / 2) - 74px);
}

@media (max-width: 960px){
  .activity_content{
    padding: 20px 12px;
    width: 100%;
  }
}

.activity_title{
  font-size: 22px;
  text-align: center;
  color: var(--color-white);
  background: var(--color-highschool);
  padding: 8px 12px;
  margin: 0 0 16px 0;
}

@media (max-width: 960px){
  .activity_title{
    font-size: 18px;
  }
}

.activity_item_box{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.activity_item_title{
  margin-bottom: 4px;
  font-size: 18px;
}

@media (max-width: 960px){
  .activity_item_title{
    font-size: 16px;
  }
}

.activity_item_text_box{
  margin: 0;
  font-size: 16px;
}

.activity_item_text{
  margin-left: 6px;
  line-height: 1.6;
}

.activity_button_box{
  display: flex;
  gap: 10px;
}

@media (max-width: 960px){
  .activity_button_box{
    flex-direction: column;
    align-items: center;
  }
}

.activity_button{
  box-sizing: border-box;
  display: block;
  width: 100%;
  border: 2px solid var(--color-highschool);
  border-radius: 6px;
  font-size: 18px;
  text-align: center;
  color: var(--color-highschool);
  padding: 12px 26px 12px 18px;
  position: relative;
}

@media (max-width: 960px){
  .activity_button{
    font-size: 16px;
    padding: 10px 22px 10px 16px;
  }
}

.activity_button::after{
  content: "";
  display: inline-block;
  position: absolute;
  border-top: 2px solid var(--color-highschool);
  border-right: 2px solid var(--color-highschool);
  transform: rotate(45deg);
  width: 10px;
  height: 10px;
  right: 18px;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

@media (max-width: 960px){
  .activity_button::after{
    right: 16px;
  }
}

.activity_button--default::after{
  content: none;
}

/* contact */
.contact_box_header{
  color: var(--color-white);
  background-color: var(--color-highschool-sub);
  padding: 5px 20px;
  font-size: 20px;
  display: block;
  margin-bottom: -1px;
  border-radius: 16px 16px 0 0;
  text-align: center;
}

.contact_box.contact_box--leaders .contact_box_header{
  background-color: var(--color-leaders-sub);
}

.contact_box.contact_box--unicefcp .contact_box_header{
  background-color: var(--color-magenta);
}
@media (max-width: 960px){
  .contact_box_header{
    font-size: 18px;
    border-radius: unset;
  }
}

.contact_box_content{
  padding: 40px;
  border: 2px solid var(--color-highschool-sub);
  border-radius: 0 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact_box.contact_box--leaders .contact_box_content{
  border: 2px solid var(--color-leaders-sub);
}

.contact_box.contact_box--unicefcp .contact_box_content{
  border: 2px solid var(--color-magenta);
}
@media (max-width: 960px){
  .contact_box_content{
    border-radius: unset;
    padding: 16px 12px;
    gap: 24px;
    align-items: center;
  }
}

.contact_box_text{
  font-size: 24px;
  text-align: center;
  line-height: 1.8;
  font-weight: 700;
}
@media (max-width: 960px){
  .contact_box_text{
    font-size: 14px;
    text-align: left;
  }
}

/* footer */
.footer_area{
  margin-top: 0;
}
@media (max-width: 960px){
  .footer_area{
    padding-bottom: 115px;
  }
}

.btn_area{
  padding-bottom: 100px;
}

/* 応募終了 */
.thanks{
  max-width: 900px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.thanks .section_inner{
  border: 2px solid;
  border-color: var(--color-highschool);
  padding: 64px 6%;
}
@media (max-width: 960px){
  .thanks .section_inner{
      padding: 32px 14px;
  }
}

.thanks.thanks--leaders .section_inner{
  border-color: var(--color-leaders-sub);
}

.thanks_title{
  text-align: center;
  margin-top: 0;
  margin-bottom: 42px;    
  font-size: 40px;
  color: var(--color-highschool);
  letter-spacing: 0.05em;
}
@media (max-width: 960px){
  .thanks_title{
      font-size: 24px;
      margin-bottom: 32px;
  }
}

.thanks.thanks--leaders .thanks_title{
  color: var(--color-leaders);
}

.thanks_button{
  max-width: 320px;
  width: 100%;
  background-color: var(--color-highschool);
}
@media (max-width: 960px){
  .thanks_button{
    max-width: 280px;
  }
}

.thanks.thanks--leaders .thanks_button{
  background-color: var(--color-leaders);
}

/* お知らせ詳細*/
.entry_notice{
  margin-bottom: 100px;
}

.entry_notice_contents{
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 960px){
  .entry_notice_contents{
      gap: 32px;
  }
}

.entry_notice_contents small{
  font-size: 70%;
}

.entry_notice_image{
  max-width: var(--container-900);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

.notice_image_wrapper{
  width: calc(100% / 2);
  margin: 0;
}

.notice_image_wrapper img{
  max-width: 100%;
  width: 100%;
  max-height: 320px;
  height: 100% !important;
  object-fit: cover;
  border-radius: 16px;
  vertical-align: bottom;
}
@media (max-width: 960px){
  .notice_image_wrapper img{
      max-height: 120px;
      border-radius: 6px;
  }
}

.notice_link_box{
  text-align: center;
}

.notice_link_box--right{
  text-align: right;
}

.entry_notice_box{
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: none;
  padding: 0 0 40px;
  margin: 0; 
  border-bottom: 2px dashed #DFDAD4;
}
@media (max-width: 960px){
  .entry_notice_box{
      gap: 12px;
      padding-bottom: 32px;
  }
}

.entry_notice_minibox{
  display: flex;
  gap: 32px;
  align-items: center;
  border-bottom: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
@media (max-width: 960px){
  .entry_notice_minibox{
      align-items: flex-start;
      flex-direction: column;
      gap: 2px;
  }
}

@media (max-width: 960px){
  .entry_notice_minibox .arrow_title{
      font-size: 18px;
  }

  .entry_notice_minibox .arrow_title::before{
      width: 22px;
      height: 22px;
  }
}

.notice_info_list{
  padding: 0;
  margin: 0;
}

.notice_info_minilist{
  padding: 0;
  margin: 10px 0 0;
}

.notice_minilist_content{
  list-style: none;
  margin-bottom: 6px;
}

.notice_minilist_content:last-child{
  margin-bottom: 0;
}

.notice_minilist_text{
  padding-left: 18px;
}

.notice_info_content{
  display: flex;
  padding-bottom: 8px;
  font-size: 18px;
}
@media (max-width: 960px){
  .notice_info_content{
      display: block;
      font-size: 16px;
  }
}

.notice_info_content:last-child{
  padding-bottom: 0;
}

.notice_info_title{
  white-space: nowrap;
}

.notice_box_title{
  margin: 0;
  white-space: nowrap;
}

.notice_box_text{
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
}
@media (max-width: 960px){
  .notice_box_text{
      font-size: 18px;
      padding-left: 22px;
  }
}

.notice_main_text{
  font-size: 18px;
  overflow-wrap: break-word;
}
@media (max-width: 960px){
  .notice_main_text{
      font-size: 16px;
  }
}

.notice_main_text strong{
  font-size: 22px;
}
@media (max-width: 960px){
  .notice_main_text strong{
      font-size: 20px;
  }
}

.notice_text_red{
  color: red;
  font-size: 24px;
  text-align:center;
  display:block;
}

.entry_notice .button{
  margin-top: 0;
}

.entry_notice .link_text{
  font-size: 18px;
}
@media (max-width: 960px){
  .entry_notice .link_text{
      font-size: 16px;
  }
}

/* button_box */
.button_box{
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
}

.button_box.column .button_list{
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 768px){
  .button_box{
    flex-direction: column;
    gap: 10px;
  }
}

.button_boxtitle{
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.button_boxtitle:before{
  content: "";
  display: block;
  border-top: 3px solid var(--color-magenta);
  border-right: 3px solid var(--color-magenta);
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}
@media (max-width: 960px){
  .button_boxtitle{
    font-size: 18px;
  }
  
  .button_boxtitle:before{
    position: relative;
    top: 2px;
  }
}

.button_list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 768px){
  .button_list{
    flex-direction: column;
    justify-content: center;
  }
}

.button_text{
  font-size: 14px;
}

.button_content{
  max-width: 350px;
  width: 100%;
}

.button_list_link{
  background: var(--color-white);
  border: 2px solid var(--color-magenta);
  padding: 8px 10px;
  border-radius: 32px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-magenta);
  text-align: center;
  display: block;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
}

.button_content .button_list_link::after{
  border-color: var(--color-magenta);
}

.button_list_link.sp{
  display: none;
}
@media (max-width: 960px){
  .button_list_link{
    font-size: 14px;
  }

  .button_list_link.pc{
    display: none;
  }

  .button_list_link.sp{
    display: block;
  }
}

/* modal */
.modal_menu{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: var(--color-magenta);
  z-index: 1000;
  padding: 12px 16px;
}
@media (max-width: 960px){
  .modal_menu{
    display: none;
    bottom: unset;
    top: 0;
    padding: 10px 16px;
  }
}

.modal_menu_inner{
  max-width: 836px;
  width: 100%;
  margin: 0 auto;
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-columns: 1fr auto;
  gap: 6px 24px;
  grid-template-areas: 
    "a b"
    "a c"; 
}
@media (max-width: 960px){
  .modal_menu_inner{
    grid-template-areas: 
    "a a"; 
  }
}

.modal_menu_button{
  grid-area: a;
  cursor: pointer;
  transition: var(--transition);
  background: #FDDE02;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text);
  position: relative;
}
@media (hover:hover) {
  .modal_menu_button:hover{
    opacity: 0.7;
  }
}
@media (max-width: 960px){
  .modal_menu_button{
    padding: 6px 16px;
    font-size: 16px;
  }
}

.modal_menu_button::after{
  content: "";
  position: absolute;
  mask-image: url(/1p/wp-content/themes/1p-club/images/youth/unicefcp/campaign/icon_modal_button.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background: var(--color-text);
  width: 24px;
  height: 24px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 16px;
}
@media (max-width: 960px){
  .modal_menu_button::after{
    width: 20px;
    height: 20px;
  }
}

.modal_menu_text{
  grid-area: b;
  color: var(--color-white);
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.modal_menu_link{
  grid-area: c;
  color: var(--color-white);
  text-align: center;
  font-size: 16px;
  text-decoration: underline;
  transition: var(--transition);
}

.modal_contents{
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  padding-top: 40px;
}

.modal_contents.active{
  display: block;
}

.modal_background{
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal_inner{
  background: var(--color-white);
  max-width: 700px;
  width: 100%;
  max-height: 75vh;
  height: 100%;
  margin: auto;
  padding: 52px 0 40px;
  border-radius: 20px;
  position: relative;
  z-index: 999;
  overflow: hidden;
}
@media (max-width: 960px){
  .modal_inner{
    width: 90%;
    max-height: 85vh;
    padding: 46px 0 40px;
  }
}

.modal_inner_contents{
  height: 100%;
}

.modal_close{
  cursor: pointer;
  position: absolute;
  width: 18px;
  height: 18px;
  top: 22px;
  right: 30px;
}
@media (max-width: 960px){
  .modal_close{
    top: 20px;
    right: 20px;
  }
}

.modal_contents_wrapper{
  padding-right: 36px;
  padding-left: 36px;
}
@media (max-width: 960px){
  .modal_contents_wrapper{
    padding-right: 20px;
    padding-left: 20px;
  }
}

.modal_title{
  font-size: 24px;
  text-align: center;
  color: var(--color-magenta);
  margin: 0 0 24px;
}
@media (max-width: 960px){
  .modal_title{
    font-size: 20px;
    margin-bottom: 16px;
  }
}

.modal_button_box{
  margin-bottom: 20px;
}

@media (max-width: 960px){
  .modal_button_box{
    margin-bottom: 16px;
  }

  .modal_button_box .button_boxtitle{
    font-size: 16px;
  }
}

.modal_button_link{
  background: var(--color-magenta);
  color: var(--color-white);
}

.modal_button_link::after{
  border-color: var(--color-white) !important;
  right: 12px;
}

.modal_button_list .modal_button_content{
  max-width: 309px;
}

.simplebar{
  height: 100%;
  padding-right: 24px;
  padding-left: 24px;
}

.simplebar .simplebar-content{
  padding: 0 !important;
}

.simplebar .simplebar-content-wrapper{
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
}

.simplebar .simplebar-content-wrapper::-webkit-scrollbar{
  display: none; /* Chrome, Safari 対応 */
  -webkit-appearance: none;
  -webkit-overflow-scrolling: touch;
}

.simplebar .simplebar-content{
  padding: 0;
}

.simplebar .simplebar-track{
  background: var(--color-white);
  border-radius: 2px;
  cursor: pointer;
  pointer-events: auto;
  margin: 0;
}

.simplebar .simplebar-track.simplebar-vertical{
  width: 6px;
}

.simplebar .simplebar-track .simplebar-scrollbar:before{
  background: #727272;
  border-radius: 2px;
  width: 100%;
  right: 0;
  left: 0;
  top: 0;
}

.modal_inner_contents.simplebar .simplebar-track{
  top: 20px;
  right: 10px;
}
