@charset "utf-8";

/* CSS Document */


/*clear
------------------------------------------*/
.clear {
  height: 1px;
}

.clear_box {
  height: 10px;
}

body {
  background-color: #CEF0FF;
}

/* main
------------------------------------------*/
#index #main {
  position: relative;
}

#index #main div.youkou_bt {
  display: flex;
  position: absolute;
  justify-content: space-around;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  text-align: center;
}
#main .youkou_bt img{
  width: 92%;
  margin: 0 15px;
}
#main .youkou_bt p{
  max-width: 92%;
  margin: 0 auto;
}

#index #main div.youkou_bt .txt {
  margin-top: 6px;
  font-size: 1.3em;
}

#index #main div.youkou_bt .txt span {
  color: #E4016C;
}

#index #main div.youkou_bt a:last-child {
  margin-left: 1em;
}
.main_text{
  height: auto;
}

#index #bnr_box {
  display: flex;
  justify-content: space-between;
  max-width: 840px;
  margin: 48px auto 0 auto;
  text-align: center;
}

/*bnr-44
------------------------------------------*/
.bnr-wrap{
  height: 200px;
  background-color: #FFFFFF;
  position: relative;
}

.bnr-44 {
  display: block;
  position: absolute;
  justify-content: center;
  top: -70%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  padding: 0 70px;
}
.bnr-44 img {
  width: 760px;
  box-shadow: 2px 4px 12px rgba(60, 115, 129, 0.3);
}
.bnr-44 img:hover{
  opacity: 0.6;
}

/*attempt 取り組み
------------------------------------------*/
#index #attempt {
  background-color: #FFFFFF;
  position: relative;
}

#index #attempt h2 {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
}
#index #attempt h2 img {
  max-width: 500px;
  width: 100%;
}

#attempt .attempt-p{
  height: auto;
  padding: 40px 0;
}

#index #attempt p.lead_sentence {
  /* position: absolute;
  left: 50%;
  transform: translateX(-50%); */
  margin: 0 auto;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.4em;
  width: 80%;
  text-align: justify;
}

#index #attempt p.main_text {
  width: 80%;
  text-align: justify;
  font-weight: normal;
  font-size: 1.2em;
  line-height: 1.4em;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
}



/*content_blue
------------------------------------------*/
#index #content_blue {
  position: relative;
  background-color: #cef0ff;
}

.content_blue_h3 {
  margin-bottom: 3em;
}

#bg_whale {
  width: 100%;
}

.box_blue01 {
  position: relative;
  width: 80%;
  margin: -175px auto;
  padding: 35px 60px;
  border: 2px solid #00a8e2;
  border-radius: 24px;
  background-color: #FFFFFF;
}

.box_blue01 .img_pin {
  position: absolute;
  top: -24px;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
}

.box_blue01 dl {
  background-color: #FFFFFF;
  margin-left: 0;
  margin-top: -12px;
  font-size: 1.4em;
  text-align: left;
}

.box_blue01 dl dt {
  float: left;
  font-weight: normal;
  padding-top: 12px;
  /* margin-right: -80px; */
}

/* .box_blue01 dl dt:first-child{
  padding-top: 0px;
} */

.box_blue01 dd {
  margin-left: 130px;
  padding-top: 12px;
}

/* .box_blue01 dd:first-child{
  padding-top: 0px;
} */

.box_blue01 dd a:hover {
  color: #00a8e2;
}

.box_blue01 dd span {
  font-size: 0.8em;
  color: #666666;
}

.box_blue02 {
  position: relative;
  width: 80%;
  margin: 270px auto 0;
  padding: 40px 60px;
  border: 2px solid #00a8e2;
  border-radius: 24px;
  background-color: #FFFFFF;
}

.box_blue02 .img_pin {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
}

#img_green_tertle {
  position: absolute;
  top: -85px;
  right: 30px;
}

#bt_jidouga_honbu {
  margin-bottom: 50px;
}

#img_kurage {
  position: absolute;
  bottom: 100px;
  left: 0;
}

#img_paintblush_blue {
  position: absolute;
  right: 0;
  bottom: 5%;
  z-index: 10;
  width: 15%;
}

/*donation_content
------------------------------------------*/
.donation_content {
  display: block;
  justify-content: center;
  margin: 7% 70px 0;
  padding: 0 0 5%;
}
.donation_content img{
  width: 760px;
}





/*content_cream
------------------------------------------*/
#content_cream {
  position: relative;
  background-color: #fff5ce;
}

.box_cream {
  position: relative;
  width: 80%;
  margin: 50px auto 80px;
  padding: 35px 60px 50px;
  border: 2px solid #ffcb00;
  border-radius: 24px;
  background-color: #FFFFFF;
}

#bg_starfish {
  position: absolute;
  top: 110px;
  right: 20px;
  z-index: 5;
}

#yellow_fish {
  position: absolute;
  top: 20%;
  left: -5%;
  z-index: 5;
}

.img_pin_cream {
  position: absolute;
  top: -24px;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
}

#jidouga_ceremony h4 {
  font-size: 1.4em;
  color: #95512A;
}

#jidouga_ceremony .ceremony_img {
  margin-top: 36px;
}

#jidouga_winners h4 {
  font-size: 1.4em;
  color: #95512A;
  margin-bottom: 36px;
}

.award-wrap{
  max-width: 644px;
  width: 100%;
}

.award_jidouga {
  margin: 0 0 8%;
}

.jidouga_works {
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  gap: 30px;
  align-items: start;
  margin-top: 10px;
  /* margin-bottom: 10%; */
}

.jidouga_works02 {
  margin-bottom: 8%;
}

.jidouga_works_img {
  object-fit: contain;
}


.jidouga_line {
  margin-bottom: 50px;
}

#with_storemanager {
  margin-top: 50px;
  margin-bottom: 5px;
}

#bg_crayon {
  position: absolute;
  left: 0;
  top: 450px;
}

#bg_crub {
  position: absolute;
  right: 0;
  top: 1480px;
}

#bg_rainbow {
  position: absolute;
  left: 0;
  top: 45%;
  width: 20%;
  z-index: 30;
}

#bg_leaf01 {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 5;
}

#bg_leaf02 {
  position: absolute;
  left: 0;
  bottom: 450px;
}

#bg_parasol {
  position: absolute;
  left: 0;
  bottom: 0;
}

#bg_sandals {
  position: absolute;
  right: 15px;
  bottom: 0;
}

/* slider
-------------------------------------*/
.slider img {
  width: 100%;

}

/* summary
------------------------------------------*/
#summary {
  position: relative;
  background-image: url(../images/index/summary_back02.png), url(../images/index/summary_back01.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left 0% bottom 75%, right 0% bottom 85%;
  margin-top: 60px;
  margin-bottom: 60px;
}

#summary h2 {
  margin-top: 48px;
}

#summary .child_01 {
  position: absolute;
  right: 225px;
  top: -132px;
}

#summary .note {
  margin-top: 12px;
  padding: 0 24px;
}

#summary .inside_img {
  margin-top: 60px;
}

#index #inside_box .note {
  margin-top: 6px;
}

/* #bnr_box #right_bnr {
  margin-left: 24px;
} */

/* news
------------------------------------------*/
#news {
  background-color: #CCECFB;
  padding: 44px 87px 60px;
}

#news dl {
  margin-top: -60px;
  background-color: #FFFFFF;
  padding: 72px 48px 48px 48px;
  border: 2px solid #009EED;
  border-radius: 24px;
  text-align: left;
  font-size: 1.2em;
}

#news dt {
  float: left;
}

#news dd {
  padding-left: 120px;
  padding-bottom: 12px;
}

/* contact
------------------------------------------*/
#contact {
  padding: 44px 87px 60px;
  position: relative;
  background-image: url(../images/index/contact_back_cloud.jpg);
  background-repeat: no-repeat;
  background-position: left 5% top 15%;
}

#contact .contact_box {
  margin-top: -72px;
  padding: 72px 48px 48px 48px;
  border: 2px solid #009EED;
  background-color: #FFFFFF;
  border-radius: 24px;
}

#contact h2 {
  margin-top: 24px;
}

.contact_detail_bt {
  margin-top: 18px;
}

@media (max-width: 800px) {
  .bnr-wrap{
  height: 170px;
  }
  #attempt .attempt-p{
    padding: 30px 0 20px;
  }
}

@media (max-width: 640px) {
  /* スマホ用のCSS */

  /* #summary img.child_01 {
    display: none;
  } */

  /*hamburger
----------------------------------------*/
  #logo {
    text-align: left;
  }

  #logo a img {
    width: 85%;
    margin-left: 0;
  }


  #index_contents h1 {
    margin-bottom: 12px;
  }

  #index #main div.youkou_bt {
    position: absolute;
    left: 10%;
    bottom: -22%;
    transform: translateX(-5%);
  }

  #index #bnr_box {
    display: block;
    margin-top: 24px;
  }

  #left_bnr img {
    width: 80%;
  }

  #bnr_box #right_bnr img {
    width: 80%;
  }

  #bnr_box #left_bnr {
    margin-bottom: 18px;
  }

  #bnr_box #right_bnr {
    margin-left: 0px;
  }

  /* #index_contents h1 {
    margin-left: 18px;
    margin-right: 18px;
  } */

  /* summary
------------------------------------------*/
  #summary {
    background-image: url(../images/index/summary_back02.png), url(../images/index/summary_back01.png);
    background-repeat: no-repeat, no-repeat;
    background-size: 22%, 25%;
    background-position: left 0% bottom 50%, right 0% bottom 40%;
    margin-bottom: 18px;
  }

  #summary h2 {
    padding-top: 36px;
    padding-left: 12px;
    padding-right: 12px;

  }

  #summary .inside_img {
    margin-top: 24px;
  }

  #index #inside_box {
    margin: 0 18px;
  }


  /* contact
------------------------------------------*/
  #contact {
    background-position: left 0% top 5%;
  }

  #contact h2 {
    margin-top: 12px;
  }



  /* main
-------------------------------------------*/
  #index #main {
    width: 100%;
  }

  #index #main div.youkou_bt {
    display: block;
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
  }

  #index #main div.youkou_bt .txt {
    font-size: 1.1em;
  }

  #index #main div.youkou_bt a img {
    display: block;
    margin-bottom: 5px;
  }

  #index #main div.youkou_bt a:last-child {
    margin: 0;
  }



  /*bnr-44
  ---------------------------*/
.bnr-wrap{
  height: 160px;
}

.bnr-44 {
  padding: 4% 20px 1%;
}
.bnr-44 img {
  width: 760px;
  box-shadow: 2px 4px 12px rgba(60, 115, 129, 0.3);
}
.bnr-44 img:hover{
  opacity: 0.6;
}

  /*attempt
------------------------------------------*/
  #index #attempt {
    width: 100%;
    height: auto;
    position: relative;
  }

  #index #attempt h2 {
    width: 75%;
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
  }

  #index #attempt p.lead_sentence {
    padding-top: 50px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.5em;
    width: 90%;
  }

  #index #attempt p.main_text {
    width: 90%;
    font-size: 1.1em;
    height: auto;
  }


  /* box_blue01
---------------------------------------*/


  #contents_box #index img#img_kurage {
    width: 14%;
  }

  #contents_box #index img.img_pin {
    width: 8%;
    top: -1em;
  }

  #contents_box #index img.img_pin_cream {
    width: 8%;
    top: -1em;
  }

  #contents_box #index img#img_green_tertle {
    width: 16%;
    top: -10%;
    right: 10%;
  }

  #contents_box #index img#img_paintblush_blue {
    width: 15%;
    bottom: 5%;
  }

  #contents_box #index img#bg_starfish {
    width: 16%;
    right: 2%;
    top: 1%;
  }

  #contents_box #index img#bg_crayon {
    width: 14%;
  }

  #contents_box #index img#bg_crub {
    width: 12%;
    top: 35%;
  }

  #contents_box #index img#bg_rainbow {
    width: 20%;
    top: 44%;
  }

  #contents_box #index img#bg_leaf01 {
    width: 13%;
    top: 61%;
  }

  #contents_box #index img#bg_leaf02 {
    width: 18%;
  }

  #contents_box #index img#bg_parasol {
    width: 30%;
  }

  #contents_box #index img#bg_sandals {
    width: 17%;
  }

  #contents_box #index img#yellow_fish {
    width: 13%;
    top: 25%;
  }

  /*content_blue
-------------------------------*/
  .content_blue_h3 {
    width: 80%;
    margin: 1em auto 2em;
  }

  .box_blue01 dl {
    width: 100%;
    font-size: 1.3em;
  }

  .box_blue01 dl dt {
    float: none;
    margin-right: 0;
    color: #00a8e2;
  }

  .box_blue01 dd {
    margin-left: 0px;
  }

  .box_blue01 {
    position: relative;
    width: 93%;
    margin: -18% auto;
    padding: 5% 5%;
    border: 2px solid #00a8e2;
    border-radius: 24px;
    background-color: #FFFFFF;
  }

  .box_blue02 {
    position: relative;
    width: 93%;
    margin: 30% auto 0;
    padding: 5% 5%;
    border: 2px solid #00a8e2;
    border-radius: 24px;
    background-color: #FFFFFF;
  }

  img#bt_jidouga_honbu {
    width: 70%;
    margin-bottom: 10%;
  }

  /*donation_content
  ---------------------------*/
  .donation_content {
    margin: 9% 20px 0;
  }


  /*content_cream
-----------------------------*/
  #content_cream {
    padding-bottom: 10%;
  }

  .box_cream {
    position: relative;
    width: 93%;
    margin: 10% auto 0;
    padding: 5% 5%;
    border: 2px solid #ffcb00;
    border-radius: 24px;
    background-color: #FFFFFF;
  }


  #jidouga_ceremony h4 {
    font-size: 1.2em;
    font-weight: bold;
  }

  #jidouga_winners h4 {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 18px;
  }

  .jidouga_works {
    display: block;
    width: 100%;
    height: auto;
  }
  .jidouga_works_img {
    display: block;
    justify-content: center;
    align-items: start;
    padding-bottom: 6%;
  }
  .jidouga_works img{
    margin: 0 auto;
    max-height: 480px;
    max-width: 400px;
  }
  .jidouga_line {
    margin-bottom: 10%;
  }
  .picture-set{
    margin-top: 10%;
  }

.award_jidouga {
  margin: 10% 0 8%;
}


  .jidouga_name02 {
    display: block;
    width: 70%;
    margin: auto;
  }

  .jidouga_name03 {
    display: block;
    width: 70%;
    margin: auto;
  }
}

@media (max-width: 500px) {
  
  /*bnr-44
  ---------------------------*/
.bnr-wrap{
  height: 120px;
}
.bnr-44 {
  top: -50%;
}


  /*attempt
------------------------------------------*/
  #index #attempt {
    width: 100%;
    height: auto;
    position: relative;
  }

  #index #attempt h2 {
    width: 75%;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
  }

  #index #attempt p.lead_sentence {
    padding-top: 30px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.5em;
    width: 90%;
  }

  #index #attempt p.main_text {
    width: 90%;
    font-size: 1.1em;
    height: auto;
  }
}

@media (max-width: 450px) {
  
  .bnr-44 {
    top: -40%;
  }
  .jidouga_works img{
    margin: 0 auto;
    max-height: 80%;
    max-width: 90%;
  }
}