@charset "utf-8";



#main_box { line-height: 2.0; }



/* side_menu ----------------- */

li.btn325 {

  background-color: rgb(218,218,218);

  border-bottom-color: rgb(204,204,204) !important;

}

li.btn325 > a {

  pointer-events:none;

  cursor: auto;

}

#side_box .side_menu li.btn325 > a::after {

  display: none;

}







/* contents ---- */





.torikumi_box > div {

  padding-top: 16px;

}



/* block01 */

.block01 .box01_01,

.block01 .box01_04 {

  width: calc(760 / 794 * 100%);

  max-width: 760px;

  margin-right: auto;

  margin-left: auto;

}



.block01 .box01_01 .image {

  width: calc(222 / 760 * 100%);

}



.block01 .box01_01 .text {

  width: calc(538 / 760 * 100%);

  padding-left: calc(20 / 538 * 100%);

}



.block01 .box01_02,

.block01 .box01_03 {

  width: calc(640 / 794 * 100%);

  max-width: 640px;

  margin-right: auto;

  margin-left: auto;

}



.block01 .box01_02 .image,

.block01 .box01_03 .image {

  width: calc(360 / 640 * 100%);

}



.block01 .box01_02 .text,

.block01 .box01_03 .text {

  width: calc(280 / 640 * 100%);

  padding-left: calc(20 / 280 * 100%);

}



.block01 .box01_04 .climaticvariation_box {

  border: 2px solid rgb(204, 204, 204);

  border-radius: 8px;

  padding: 4px 24px 14px;

}



.block01 .box01_04 .climaticvariation_box h4 {

  font-size: 16px;

  text-align: center;

  font-weight: 900;

}



.block01 .box01_04 .climaticvariation_box .list_item h5 {

  text-align: center;

  font-weight: 700;

  margin-bottom: 16px;

  line-height: 1.3;

}



.block01 .box01_04 ul {

  display: flex;

  justify-content: space-between;

}



.block01 .box01_04 ul > li {

  width: calc((100% - 20px) / 3);

  border: 1px solid #e0e0e0;

  padding: 16px;

}

.block01 .box01_04 ul > li > .text {

  line-height: 1.7;

}



.block01 .box01_04 ul > li img {

  max-width: 200px;

  display: block;

  margin-left: auto;

  margin-right: auto;

}



.block01 .box02_01 {

  width: calc(760 / 794 * 100%);

  max-width: 760px;

  margin-right: auto;

  margin-left: auto;

}



.block01 .box02_01 .image {

  width: calc(150 / 760 * 100%);

}



.block01 .box02_01 .text {

  width: calc(538 / 760 * 100%);

  padding-right: calc(20 / 538 * 100%);

}



@media screen and (max-width: 767px) {

  .block01 .box01_01 {

    flex-direction: column;

  }

  .block01 .box01_01 .image {

    width: 111px;

    margin: -18px auto 8px;

  }

  .block01 .box01_01 .text {

    width: 100%;

    padding-left: 0;

  }

  .block01 .box01_02,

  .block01 .box01_03 {

    flex-direction: column;

  }

  .block01 .box01_02 .image,

  .block01 .box01_03 .image {

    width: 100%;

    max-width: 360px;

    margin: 0 auto;

  }

  .block01 .box01_02 .text,

  .block01 .box01_03 .text {

    width: calc( 260 / 360 * 100%);

    max-width: 260px;

    margin: 16px auto 0;

    padding-left: 0;

  }



  .block01 .box01_04 ul {

    display: block;

  }



  .block01 .box01_04 ul > li {

    width: 100%;

  }

  .block01 .box01_04 ul > li:not(:last-child) {

    margin-bottom: 24px;

  }



  .block01 .box01_04 ul > li img {

    max-width: 300px;

    display: block;

    margin-left: auto;

    margin-right: auto;

  }

  

  .block01 .box02_01 {

    flex-direction: column-reverse;

  }

  .block01 .box02_01 .image {

    width: 111px;

    margin: 0 auto 8px;

  }

  .block01 .box02_01 .text {

    width: 100%;

    padding-right: 0;

  }

  .block01 .box02_02 .image {

    max-width: 320px;

    margin-top: -8px;

    margin-bottom: 8px;

  }

}











