@charset "UTF-8";

/*=====================================
	#contents
======================================*/
#contents {
  background-color: #fff;
}

/*=====================================
	color
======================================*/
.green_1 {
  color: #1a8b2f;
}


.purple {
  color: #955dbe;
}

.blue {
  color: #6699e2;
}

.maroon {
  color: #800000;
}


.brown2 {
  color: #af8530;
}

.orange-new {
  color: #d4a33f;
}


.bg-pink {
  background-color: #ff578c;
}

/*=====================================
	common
======================================*/

.w-98per {
  width: 98%;
}


.w-95per {
  width: 95%;
}

.ms-minus-10 {
  margin-left: -10px;
}

.ms-minus-15 {
  margin-left: -15px;
}


.disc-purple li::before {
  content: '\25CF';
  color: #a542d8;
  font-size: 18;
  margin-right: 5px;
  /*くろまる maru*/
}


/*=====================================
	// id #title
======================================*/

#title {
  width: 100%;
  position: relative;
  background-color: #fff;


  h1 {
    width: auto;
    max-width: 1188px;
    margin-inline: auto;
  }

  .bg_top {
    padding-top: 8vh;
    background: url(../img/bg_title_mob_1-80.jpg) no-repeat top center;
    background-size: contain;
  }

  .bg_bottom {
    background: url(../img/bg_title_mob_2-80.jpg) no-repeat bottom center;
    background-size: contain;
    padding-bottom: 16vh;
  }


  .join {
    width: 26%;
    aspect-ratio: 330 / 289;
    display: block;
    margin-top: -6vh;
    margin-left: auto;
    margin-right: 6px;
  }


}

/* end #title */

@media screen and (min-width: 768px) {
  #title {
    .join {
      width: 22%;
      /* width: 30%; */
      aspect-ratio: 330 / 289;
      display: block;
      margin-top: -15vh;
      margin-left: auto;
      margin-right: 15px;
    }

  }

}


@media screen and (min-width: 900px) {
  #title {

    h1 {
      width: 70%;
    }

    .bg_top {
      padding-top: 30px;
      background: url(../img/pc/bg_pc_all.png) no-repeat top center;
      background-size: contain;
    }

    .bg_bottom {
      background: none;
      padding-bottom: 60px;
    }

    .join {
      position: absolute;
      width: 15%;
      aspect-ratio: 214 / 187;
      /*
          h1が width:50% になるので
          h1の半分 = 25vw
          h1の右端 = 50% + 25vw
          そこから60px内側
        */
      left: calc(50% + 25vw - 60px);

      /*
          h1も高さがautoで縮むなら
          topは見ながら調整
        */
      top: calc(90px + 22vw);

    }
  }
}


@media screen and (min-width: 1280px) {

  #title {
    h1 {
      width: 70%;
      max-width: 1188px;
      margin-inline: auto;
    }

    .bg_top {
      padding-top: 60px;
      background: url(../img/pc/bg_pc_all.png) no-repeat top center;
      /* background-size: initial; */
      background-size: contain;
    }

    .bg_bottom {
      background: none;
    }

    .join {
      position: absolute;
      width: 214px;
      height: 187px;
    }

  }
}


@media screen and (min-width: 1536px) {
  #title {

    h1 {
      width: 90%;
      max-width: 1100px;
      margin-inline: auto;
    }

    .join {
      position: absolute;
      width: 15%;
      max-width: 300px;
      height: auto;
      aspect-ratio: 330 / 289;
      left: calc(50% + 25vw - 60px);
      /* h1が width:50% になるのでh1の半分 = 25vw h1の右端 = 50% + 25vw そこから60px内側  */
      top: calc(90px + 22vw);
      /* h1も高さがautoで縮むならtopは見ながら調整 */
    }

  }
}


@media screen and (min-width: 1900px) {
  #title {

    .bg_top {
      padding-top: 60px;
      background: url(../img/pc/bg_pc_all.png) no-repeat top center;
      background-size: cover;
      /* border: #f00 thin solid; */
    }

    .join {
      width: 220px;
      height: auto;
      aspect-ratio: 330 / 289;
      left: calc(50% + 25vw - 150px);
      top: calc(90px + 24vw);
    }


  }

}

/*=====================================
	//NOTE layout common
======================================*/
.contents-box {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 5%;
  padding-right: 5%;
  background: #fff;
  border-radius: 10px;
  position: relative;


  h3 {
    width: 28%;
    aspect-ratio: 1 / 1;
    color: #fff;
    background: #945dbe url(../img/bg_paper_purple-80.jpg) repeat;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -15px;
    right: 10px;
  }

  .contents-box h3.left {
    left: 15px;
  }

  h3.right {
    right: 5px;
  }

  h5, h6 {
    color: #7a3107;
  }
}



@media screen and (min-width: 1024px) {
  .contents-box {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    text-align: center;
    border-radius: 10px;
    position: relative;


    h3 {
      width: 180px;
      height: 180px;
      position: absolute;
      top: -60px;
      left: 30px;
    }


    h3.left {
      left: 45px;
    }

    h3.right {
      right: 45px;
    }

  }

}

/*================================
	// common
=================================*/
.link:hover {
  color: #333;
}

.arrow {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #a542d8;
  display: inline-block;
  margin-right: 3px;
  vertical-align: middle;
}


/*=================================
	#outline //NOTE date_detal
===================================*/
#outline {
  padding-top: 30px;
  padding-bottom: 30px;
  background: #f6ab74 url(../img/bg_mob_orange-80.jpg) repeat top center;
  background-size: contain;
}

.date_detail {
  margin-bottom: 60px;


  .date_detail_item h4 {
    font-size: 15px;
    color: #af8530;
    letter-spacing: 0.2em;
  }

  .date_detail_item h4 span {
    padding: 5px 15px 2px;
    background-color: #f3eddf;
  }

}


.btn-entry a {
  width: 95%;
  max-width: 700px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  margin: auto;
  padding: 0.9em 1em 1em;
  background: #945dbe;
  border-radius: 3em;
  display: block;
  /* box-shadow: 0 8px 0 0 #eee; */
}


@media screen and (min-width: 1000px) {

  #outline {
    background: #f6ab74 url(../img/bg_pc_orange-80.jpg) repeat;
    background-size: contain;
  }


  .date_detail {
    padding: 60px 60px 0;
  }
}

@media screen and (min-width: 1280px) {

  .date_detail {
    text-align: center;
    position: relative;
  }

  .date_detail .endtxt {
    font-size: 1.4rem;
    margin-bottom: 0;
  }

  .date_detail_item .detail_txt .link {
    text-decoration: underline;
  }

  .checklist {
    color: #666;
    font-size: 12px;
  }

  .checklist a {
    text-decoration: underline;
  }

  .vol-52 #about_mrc .link a {
    max-width: 360px;
  }

  .btn-entry a {
    font-size: 24px;
  }
}


/*====================================================
        individuals 
=====================================================*/
/* #inq  */

#inq.date_detail_item h4 {
  margin-bottom: 5px;
  letter-spacing: 0;
}

#inq.date_detail_item dl {
  font-size: 1.6rem;
  margin-bottom: 20px;
}

#inq.date_detail_item dt {
  color: #b09255;
}

#inq.date_detail_item dt span {
  padding: 5px 20px;
  background-color: #f5eccc;
}

#inq.date_detail_item dd:last-child {
  padding-top: 5px;
}

@media screen and (min-width: 768px) {
  #inq.date_detail_item dt span {
    padding: 5px 40px;
  }
}


/*==========================
       apply
==========================*/

.apply {
  h4 {
    height: 50px;
    margin-bottom: 15px;
    color: #a542d8;
    line-height: 1.2;
    border: #a542d8 thin solid;
    border-left: none;
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/*==========================
       reco fair
==========================*/
.text-orange {
  color: #ff932f;
}

.text-brown {
  color: #724012;
}

#reco-fair {
  position: relative;
  border: #ff932f thin solid;
}

#reco-fair .notice {
  font-size: 14px;
  position: absolute;
  top: -35px;
  right: -15px;
  width: 80px;
  height: 80px;
  background-color: #ff932f;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#reco-fair h5 {
  color: #ff932f;
}

#reco-fair .feaver {
  position: relative;
}

#reco-fair .feaver::before {
  /*バックスラッシュ*/
  content: "＼";
  color: #724012;
  position: absolute;
  top: 0;
  left: -15px;
}

#reco-fair .feaver::after {
  content: "／";
  /*スラッシュ全角*/
  color: #724012;
  position: absolute;
  top: 0;
  right: -15px;
}

@media screen and (min-width: 1024px) {
  #reco-fair .notice {
    font-size: 16px;
    top: -15px;
    right: 30px;
    width: 100px;
    height: 100px;
  }

  #reco-fair .feaver::before {
    position: relative;
  }

  #reco-fair .feaver::after {
    position: relative;
  }
}

/*==================================

==========================*/
@media screen and (max-width: 768px) {
  .qr.pc {
    display: block;
    margin: auto;
  }
}

/*==================================
 #past
==========================*/
#past ul li {
  font-size: 14px;
  line-height: 1.6;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}