main { max-width: 1220px; padding: 0 20px; margin: 0 auto 80px; }

.title_wrap { padding: 0 20px; }
@media screen and (max-width: 640px) { .title_wrap { margin-top: 20px; } }
.title_wrap h2 { max-width: 1180px; margin: 40px auto 30px; font-size: 25px; color: #D70C18; position: relative; padding: 0 0 0 40px; }
@media screen and (max-width: 640px) { .title_wrap h2 { font-size: 20px; margin: 0 0 20px; padding: 0 0 0 30px; } }
.title_wrap h2::before { content: ""; position: absolute; left: 0; top: 5px; background: url(/common/img/icon_block.svg) center no-repeat; background-size: cover; width: 28px; height: 28px; }
@media screen and (max-width: 640px) { .title_wrap h2::before { top: 3px; width: 20px; height: 20px; } }

.main_visual { border-radius: 0 10px 10px 0; position: relative; height: 30vw; display: flex; align-items: center; }
.main_visual h3 { font-size: 36px; letter-spacing: 0.1em; color: #fff; font-feature-settings: "palt"; font-family: sans-serif; font-weight: bold; width: 1220px; padding: 0 20px; margin: 0 auto 60px; position: relative; z-index: 10; }
@media screen and (max-width: 640px) { .main_visual h3 { font-size: 18px; margin: 0; } }
.main_visual:after { content: ""; position: absolute; top: 0; left: 0; width: 85%; height: 30vw; background: url(../img/main_visual.jpg) right 0 no-repeat; width: 90%; background-size: cover; border-radius: 0 10px 10px 0; }

.message { position: relative; margin-top: -60px; position: relative; z-index: 5; height: 10vw; width: 100%; display: flex; align-items: center; }
@media screen and (max-width: 640px) { .message { margin-top: -10px; height: 43vw; } }
.message p { color: #fff; font-size: 1.5vw; line-height: 2; width: 1220px; padding: 0 20px; margin: 0 auto; position: relative; z-index: 10; }
@media screen and (min-width: 1600px) { .message p { font-size: 24px; } }
@media screen and (max-width: 640px) { .message p { font-size: 14px; line-height: 1.7; width: 75%; padding: 0; margin: 0 0 0 20px; }
  .message p br { display: none; } }
.message:after { content: ""; position: absolute; top: 0; left: 0; width: 85%; height: 10vw; background: #D70C18; border-radius: 0 10px 10px 0; }
@media screen and (max-width: 640px) { .message:after { height: 43vw; } }

main { margin-top: 60px; }
@media screen and (max-width: 640px) { main { margin-top: 20px; } }
main .sdgs { margin-top: 60px; }
main .sdgs h3 { background: #EDF5FD; padding: 10px; border-radius: 5px; color: #1D77D0; font-weight: bold; margin-bottom: 20px; }
main .sdgs ul { margin-top: 20px; display: flex; justify-content: space-between; }
main .green { margin-top: 60px; }
main .green h3 { background: #E7F5DA; padding: 10px; border-radius: 5px; color: #518D0B; font-weight: bold; margin-bottom: 20px; }
main .green .wrap { display: flex; justify-content: space-between; }
@media screen and (max-width: 640px) { main .green .wrap { display: block; } }
main .green .wrap .text { width: 70%; }
@media screen and (max-width: 640px) { main .green .wrap .text { width: 100%; } }
main .green .wrap .text .guideline { margin-top: 20px; background: #FBFFF7; border-radius: 5px; border: solid 1px #A8D377; display: inline-block; padding: 30px; }
@media screen and (max-width: 640px) { main .green .wrap .text .guideline { padding: 15px; } }
main .green .wrap .text .guideline h4 { font-size: 20px; color: #518D0B; font-weight: bold; }
@media screen and (max-width: 640px) { main .green .wrap .text .guideline h4 { font-size: 16px; } }
main .green .wrap .text .guideline ul { margin-left: 20px; }
main .green .wrap .text .guideline ul li { margin-top: 15px; list-style: circle; }
main .green .wrap .img { width: 25%; }
@media screen and (max-width: 640px) { main .green .wrap .img { text-align: center; margin-top: 20px; width: 100%; }
  main .green .wrap .img img { width: 50%; } }

.boxs { display: flex; justify-content: space-between; flex-wrap: wrap; }
@media screen and (max-width: 640px) { .boxs { display: block; } }
.boxs .unit_wrap { width: 48%; }
@media screen and (max-width: 640px) { .boxs .unit_wrap { width: 100%; } }
.boxs .unit_wrap p { height: 4.5em; }
@media screen and (max-width: 640px) { .boxs .unit_wrap p { height: auto; } }
.boxs .unit_wrap.height_max p { height: 6.5em; }
@media screen and (max-width: 640px) { .boxs .unit_wrap.height_max p { height: auto; } }

.unit_wrap { margin-top: 60px; }
.unit_wrap .box_head { border-bottom: solid 1px #D70C18; position: relative; display: flex; align-items: flex-end; justify-content: space-between; }
.unit_wrap .box_head:after { font-size: 40px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; position: absolute; right: 0; top: -10px; color: rgba(215, 12, 24, 0.2); }
@media screen and (max-width: 640px) { .unit_wrap .box_head:after { top: -5px; font-size: 25px; } }
.unit_wrap .box_head h3 { font-size: 20px; font-weight: bold; display: inline-block; border-bottom: solid 3px #D70C18; padding-bottom: 10px; }
.unit_wrap .box_head h3 sub { font-size: 12px; vertical-align: middle; }
@media screen and (max-width: 640px) { .unit_wrap .box_head h3 { font-size: 18px; padding-bottom: 5px; } }
.unit_wrap .box_head ul { display: flex; justify-content: flex-end; }
.unit_wrap .box_head ul li { margin-left: 10px; width: 60px; }
.unit_wrap p { margin-top: 20px; }
.unit_wrap ul.img { display: flex; justify-content: space-between; margin-top: 40px; }
@media screen and (max-width: 640px) { .unit_wrap ul.img { justify-content: space-around; flex-wrap: wrap; margin-top: 20px; } }
.unit_wrap ul.img li figure img { display: block; border-radius: 5px; }
.unit_wrap ul.img li figure figcaption { margin-top: 10px; font-size: 12px; color: #666; }
@media screen and (max-width: 640px) { .unit_wrap ul.img li figure figcaption { font-size: 10px; } }
.unit_wrap.box01 .img li { width: 32%; }
@media screen and (max-width: 640px) { .unit_wrap.box01 .img li { width: 48%; margin-bottom: 15px; } }
.unit_wrap.box06 .txt_img { display: flex; justify-content: space-between; }
@media screen and (max-width: 640px) { .unit_wrap.box06 .txt_img { display: block; } }
.unit_wrap.box06 .txt_img p { width: 48%; }
@media screen and (max-width: 640px) { .unit_wrap.box06 .txt_img p { width: 100%; } }
.unit_wrap.box06 .txt_img .img { margin-top: 20px; width: 48%; }
@media screen and (max-width: 640px) { .unit_wrap.box06 .txt_img .img { width: 100%; } }
.unit_wrap.img_two .img li { width: 48%; }

.box7_box8 { display: flex; justify-content: space-between; }
@media screen and (max-width: 640px) { .box7_box8 { display: block; } }
.box7_box8 .box07 { width: 27%; }
@media screen and (max-width: 640px) { .box7_box8 .box07 { width: 100%; } }
.box7_box8 .box07 .img { justify-content: center; }
.box7_box8 .box08 { width: 65%; }
@media screen and (max-width: 640px) { .box7_box8 .box08 { width: 100%; } }

/*# sourceMappingURL=com.css.map */