@charset "utf-8";



#main_box {

  line-height: 2.0;

}



/* side_menu ----------------- */

li.btn431 {

  background-color: rgb(218,218,218);

  border-bottom-color: rgb(204,204,204) !important;

}

li.btn431 > a {

  pointer-events:none;

  cursor: auto;

}

#side_box .side_menu li.btn431 > a::after {

  display: none;

}









/* == csr_society_community_fund ==================== */

/* contents ---- */

#main_box .box02 .img01 {

  width: 200px;

  margin-left: 20px;

}



#main_box .action_menu_box {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}



#main_box .action_menu {

  display: block;

  width: calc(50% - 5px);

  margin-bottom: 10px;

}

#main_box .action_menu > a {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  position: relative;

  width: 100%;

  height: 102px;

  border: 1px #cfcfcf solid;

  padding-left: 106px; 

}

#main_box .action_menu > a::before {

  position: absolute;

  top: 1px;

  left: 1px;

  width: 98px;

  height: 98px;

  background-image: url(../images/community_fund/btn01.png?ud=180417);

  background-repeat: no-repeat;

  content: '';

}

#main_box .action_menu.sec1 a::before { background-position: -1px -1px; }

#main_box .action_menu.sec2 a::before { background-position: -1px -101px; }

#main_box .action_menu.sec3 a::before { background-position: -1px -201px; }

#main_box .action_menu.sec4 a::before { background-position: -1px -301px; }

#main_box .action_menu.sec5 a::before { background-position: -1px -401px; }

#main_box .action_menu.sec6 a::before { background-position: -1px -501px; }

#main_box .action_menu.sec7 a::before { background-position: -1px -601px; }

#main_box .action_menu.sec8 a::before { background-position: -1px -701px; }

#main_box .action_menu.sec9 a::before { background-position: -1px -801px; }



#main_box .action_menu > a::after {

  position: absolute;

  top: 50%;

  right: 10px;

  width: 13px;

  height: 16px;

  background-image: url(/common/images/arrow_right.svg);

  background-repeat: no-repeat;

  background-size: contain;

  transform: translate3d(0, -50%, 0);

  content: '';

}

#main_box .action_menu > a:hover::after {

  background-image: url(/common/images/arrow_right_r.svg);

}



#main_box .action_menu > a > span {

  display: block;

  padding-right: 32px;

  line-height: 1.2;

  font-weight: 700;

}

#main_box .action_menu > a:hover > span {

  color: rgb(195,39,44);

}



@media screen and (max-width:767px) {

  #main_box .action_menu {

    width: 100%;

  }

}



/*

#main_box .action_menu.sec1 a:hover {

  background-position: -326px -1px;

}



#main_box .action_menu.sec2 a:hover {

  background-position: -326px -101px;

}



#main_box .action_menu.sec3 a:hover {

  background-position: -326px -201px;

}



#main_box .action_menu.sec4 a:hover {

  background-position: -326px -301px;

}



#main_box .action_menu.sec5 a:hover {

  background-position: -326px -401px;

}



#main_box .action_menu.sec6 a:hover {

  background-position: -326px -501px;

}



#main_box .action_menu.sec7 a:hover {

  background-position: -326px -601px;

}



#main_box .action_menu.sec8 a:hover {

  background-position: -326px -701px;

}



#main_box .action_menu.sec9 a:hover {

  background-position: -326px -801px;

}

*/











/* == csr_activity ======================= +/

/* contents ---- */

.csr_activity .bnr01,

.csr_activity .img01 {

  text-align: center;

}



.csr_activity .img02 {

  width: calc(320 / 794 * 100%);

  max-width: 320px;

  margin-left: 20px;

}



.csr_activity .img03 {

  text-align: center;

}



.csr_activity .img03 a {

  display: block;

  max-width: 534px;

  margin-right: auto;

  margin-left: auto;

}



.csr_activity .btn1_1 {

  display: block;

  cursor: pointer;

}



.csr_activity .modal_box {

  position: relative;

  top: 50%;

  left: 50%;

  margin-top: -2000px;

  margin-left: -444px;

}



.csr_activity .modal_box.m_box1_1 {

  background-image: url(../images/img01l.png?ud=190527);

  background-repeat: no-repeat;

  width: 889px;

  height: 1000px;

}



.csr_activity .modal_box.m_box1_1 .btn01 {

  position: absolute;

  top: 385px;

  left: 338px;

  width: 186px;

  height: 50px;

  background-color: #fff;

  opacity: 0;

}



.csr_activity .modal_box.m_box1_1 .btn01:hover {

  opacity: 0.7;

}



.csr_activity .modal_box.m_box1_1 .btn_close {

  position: absolute;

  top: -20px;

  right: -20px;

  width: 40px;

  height: 40px;

  background: url(/common/images/tag_306.png) no-repeat;

  cursor: pointer;

}





/* == csr_vending_machine ======================= +/

/* contents ---- */

.csr_vending_machine .img02 {

  position: relative;

  width: 100%;

  padding-top: calc(250 / 660 * 100%);

  background-image: url(../images/vending_machine/img02.jpg);

  background-repeat: no-repeat;

  background-size: contain;

}



.csr_vending_machine .img02 .action_img02 {

  position: absolute;

  top: 0;

  left: 0;

  width: calc(320 / 660 * 100%);

  height: 100%;

  background-image: url(../images/vending_machine/img02_action.jpg);

  background-repeat: no-repeat;

  background-size: contain;

  background-position: 0 0;

  opacity: 0;

}



.csr_vending_machine .img02 .action_img02:hover {

  animation: changeImg 3s linear infinite;

}



@keyframes changeImg {

  from {

    opacity: 0;

  }



  5% {

    opacity: 1;

  }



  50% {

    opacity: 1;

  }



  55% {

    opacity: 0;

  }



  to {

    opacity: 0;

  }

}



.csr_vending_machine .box02_00 {

  display: block;

  position: relative;

  background-image: url(../images/vending_machine/img03.jpg);

  background-repeat: no-repeat;

  background-size: contain;

  background-position: left top;

  width: 100%;

  padding-top: calc(480 / 660 * 100%);

}



.csr_vending_machine .box02_00 a {

  display: block;

  position: absolute;

  background-color: #fff;

  opacity: 0;

}



.csr_vending_machine .box02_00 a:hover {

  opacity: 0.3;

}



.csr_vending_machine .box02_00 a.btn0301 {

  width: calc(157 / 660 * 100%);

  height: calc(113 / 480 * 100%);

  top: calc(367 / 480 * 100%);

  left: calc(503 / 660 * 100%);

}



.csr_vending_machine .box02_00 a.btn0302 {

  width: calc(219 / 660 * 100%);

  height: calc(163 / 480 * 100%);

  top: 0px;

  left: calc(284 / 660 * 100%);

}



.csr_vending_machine .box02_00 a.btn0303 {

  width: calc(178 / 660 * 100%);

  height: calc(143 / 480 * 100%);

  top: calc(337 / 480 * 100%);

  left: 0px;

}



.csr_vending_machine .box02_00 a.btn0304 {

  width: calc(151 / 660 * 100%);

  height: calc(157 / 480 * 100%);

  top: calc(323 / 480 * 100%);

  left: calc(352 / 660 * 100%);

}



.csr_vending_machine .box02_00 a.btn0305 {

  width: calc(174 / 660 * 100%);

  height: calc(191 / 480 * 100%);

  top: calc(289 / 480 * 100%);

  left: calc(178 / 660 * 100%);

}



.csr_vending_machine .box02_00 a.btn0306 {

  width: calc(157 / 660 * 100%);

  height: calc(163 / 480 * 100%);

  top: 0px;

  left: calc(127 / 660 * 100%);

}



.csr_vending_machine .box02_00 a.btn0307 {

  width: calc(127 / 660 * 100%);

  height: calc(201 / 480 * 100%);

  top: 0px;

  left: 0px;

}



.csr_vending_machine .box02_00 a.btn0308 {

  width: calc(151 / 660 * 100%);

  height: calc(160 / 480 * 100%);

  top: calc(163 / 480 * 100%);

  left: calc(352 / 660 * 100%);

}



.csr_vending_machine .box02_00 a.btn0309 {

  width: calc(225 / 660 * 100%);

  height: calc(126 / 480 * 100%);

  top: calc(163 / 480 * 100%);

  left: calc(127 / 660 * 100%);

}



.csr_vending_machine .box02_00 a.btn0310 {

  width: calc(157 / 660 * 100%);

  height: calc(183 / 480 * 100%);

  top: 0px;

  left: calc(503 / 660 * 100%);

}



.csr_vending_machine .box02_00 a.btn0311 {

  width: calc(127 / 660 * 100%);

  height: calc(136 / 480 * 100%);

  top: calc(201 / 480 * 100%);

  left: 0px;

}



.csr_vending_machine .box02_00 a.btn0312 {

  width: calc(157 / 660 * 100%);

  height: calc(184 / 480 * 100%);

  top: calc(183 / 480 * 100%);

  left: calc(503 / 660 * 100%);

}



.taiken_report_box {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: flex-start;

}

.taiken_report_box > li {

  position: relative;

  width: calc(50% - 16px);

  border-radius: 6px;

  background-color: rgb(240,240,240);

  padding: 16px;

}

.taiken_report_box > li > .name {

  font-weight: 700;

}

.taiken_report_box > li:nth-child(2) {

  margin-top: 60px;

}

.taiken_report_box > li:nth-child(3) {

  margin-top: -10px;

}

.taiken_report_box > li:nth-child(4) {

  margin-top: 50px;

}

.taiken_report_box > li::after {

  display: block;

  position: absolute;

  bottom: 50%;

  content: '';

}

.taiken_report_box > li:nth-child(2n+1)::after {

  left: 100%;

  border-left: 24px rgb(240,240,240) solid;

  border-bottom: 24px transparent solid;

}

.taiken_report_box > li:nth-child(2n)::after {

  right: 100%;

  border-right: 24px rgb(240,240,240) solid;

  border-bottom: 24px transparent solid;

}

@media screen and (max-width:767px) {

  .taiken_report_box > li {

    padding: 6px;

    width: calc(100% - 32px);

    margin-left: 16px;

  }

  .taiken_report_box > li:nth-child(2),

  .taiken_report_box > li:nth-child(3),

  .taiken_report_box > li:nth-child(4) {

    margin-top: 16px;

  }

}







.csr_vending_machine .box02_01 li {

  display: block;

  float: left;

  width: 195px;

  padding-right: 17px;

  font-size: 12px;

}



.csr_vending_machine .box02_01 li:last-child {

  padding-right: 0;

}



.csr_vending_machine .img08,

.csr_vending_machine .img09,

.csr_vending_machine .img10 {

  margin-left: 20px;

}

.csr_vending_machine .img08 {

  width: calc(212 / 794 * 100%);

}

.csr_vending_machine .img09 {

  width: calc(233 / 794 * 100%);

}

.csr_vending_machine .img10 {

  width: calc(280 / 794 * 100%);

}





/* == csr_support_nurturing_children ======================= +/

/* contents ---- */

.csr_support_nurturing_children .box_3col li a {

  display: block;

  margin-bottom: 5px;

}



.csr_support_nurturing_children .img08 {

  padding-left: 20px;

  font-size: 12px;

  line-height: 1.44;

}



.csr_support_nurturing_children .img08 img {

  display: block;

  padding-bottom: 5px;

}



.csr_support_nurturing_children .dance_voice_box {

  display: flex;

  justify-content: center;

  margin-top: 20px;

}



.csr_support_nurturing_children .dance_voice_box .dance_voice_panel_l {

  width: 309px;

}



.csr_support_nurturing_children .dance_voice_box .dance_voice_panel_r {

  width: 309px;

  padding-top: 20px;

}



.csr_support_nurturing_children .dance_voice_box .voice_panel {

  position: relative;

  margin-bottom: 8px;

  background-repeat: no-repeat;

  border: 1px #999 solid;

  border-radius: 8px;

  background-color: rgb(255,255,255);

}



.csr_support_nurturing_children .dance_voice_box .dance_voice_panel_l .voice_panel {

  margin-right: 8px;

  /* background-image: url(../images/support_nurturing_children/dance_panel_bg01.png); */

}



.csr_support_nurturing_children .dance_voice_box .dance_voice_panel_r .voice_panel {

  margin-left: 8px;

  /* background-image: url(../images/support_nurturing_children/dance_panel_bg02.png); */

}



.csr_support_nurturing_children .dance_voice_box .voice_panel.first {

  background-position: 0 -19px;

}



.csr_support_nurturing_children .dance_voice_box .dance_voice_panel_l .voice_panel p {

  padding-left: 14px;

  padding-right: 14px;

  padding-bottom: 12px;

}



.csr_support_nurturing_children .dance_voice_box .dance_voice_panel_r .voice_panel p {

  padding-left: 14px;

  padding-right: 14px;

  padding-bottom: 12px;

}

.csr_support_nurturing_children .dance_voice_box .voice_panel::before {

  display: block;

  position: absolute;

  top: 64px;

  width: 10px;

  height: 10px;

  border-top: 1px #999 solid;

  border-right: 1px #999 solid;

  background-color: rgb(255,255,255);

  content: '';

}

.csr_support_nurturing_children .dance_voice_box .dance_voice_panel_r .voice_panel::before {

  transform: rotate(225deg);

  left: -6px;

}

.csr_support_nurturing_children .dance_voice_box .dance_voice_panel_l .voice_panel::before {

  transform: rotate(45deg);

  right: -6px;

}



.csr_support_nurturing_children .dance_voice_box .voice_panel p.voice_t {

  padding-top: 12px;

  color: #fe9200;

  font-weight: bold;

}



.csr_support_nurturing_children .dance_voice_box .voice_panel.first p.voice_t {

  padding-top: 15px;

}



.csr_support_nurturing_children .dance_voice_box .voice_panel_bottom {

  height: 9px;

  /* background-image: url(../images/support_nurturing_children/dance_panel_bg05.png); */

  background-repeat: no-repeat;

}



.csr_support_nurturing_children .dance_voice_box .dance_voice_panel_r .voice_panel_bottom {

  background-position: 14px 0;

}





.csr_support_nurturing_children .movie_2col {

  width: 520px;

  margin-right: auto;

  margin-left: auto;

}



.csr_support_nurturing_children .movie_2col .pickup {

  float: left;

  width: 240px;

  padding-right: 10px;

  padding-left: 10px;

  font-size: 12px;

  line-height: 1.44;

}



.csr_support_nurturing_children .movie_2col .pickup img {

  padding-bottom: 5px;

}



@media screen and (max-width:767px) {

  .csr_support_nurturing_children .movie_2col {

    width: 100%;

  }

}



.box05 .inner .box_2col {

    display: flex;

    justify-content: space-between;

}

.box05 .inner .box_2col li {

    display: block;

    font-size: 12px;

    line-height: 1.44;

}

.box05 .inner .box_2col li.img04_01{

    width: calc(596 / 794 * 100%); 

    text-align: center;

}

.box05 .inner .box_2col li.img04_02{

    width: calc(170 / 794 * 100%); 

}



@media screen and (max-width:767px) {

  .box05 .inner .box_2col {

    display: block;

}

    .box05 .inner .box_2col li.img04_01{

    width: 100%; 

}

    .box05 .inner .box_2col li.img04_02{

    width: 100%;

        display: flex;

        align-items: center;

}

    .box05 .inner .box_2col li.img04_02 img {

        width: 30%;

        margin-top: 10px;

    }

}