@charset "utf-8";

/* ====================================================================
 各ページの設定
==================================================================== */

/* トップページ
--------------------------------------------------------- */
body.home {}

/**/
body.home #contents .home-mainimage {
    margin: 0 -20px 15px;
}
@media print, screen and (max-width: 414px) {
    body.home #contents .home-mainimage {
        margin: 0 -10px 15px;
    }
}



/* ユニセフ募金の種類
--------------------------------------------------------- */
body.donation1 {}

/* col 幅調整 */
body.donation1 #contents .cmn-row01 > .col.col-donation1-01 {
  -webkit-flex: 1 2 calc((100% - 20px) / 2);
  flex: 1 2 calc((100% - 20px) / 2);
}
body.donation1 #contents .cmn-row01 > .col.col-donation1-02 {
  -webkit-flex: 1 1 320px;
  flex: 1 1 320px;
}

/* donation1_bg */
body.donation1 #contents .donation1_bg{
  border-radius: 6px;
  background-color: #deeef9;
  padding: 20px;
}
@media print, screen and (max-width: 414px) {
  body.donation1 #contents .donation1_bg{
    padding: 10px;
  }
}

/* モーダル */
body.donation1 .modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
body.donation1 .modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
body.donation1 .modal__content{
    background: #fff;
    left: 50%;
    padding: 10px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    text-align: center;
}
body.donation1 .js-modal-close {
  color: #09f !important;
  cursor: pointer;
}


/* ユニセフ募金受付口座について
--------------------------------------------------------- */
body.donation2 {}

/* donation2-line */
body.donation2 .donation2-line-top {
  border-top: 1px solid #09f;
}

/* cmn-num-list01 */
body.donation2 #contents .cmn-num-list01 li {
  border-bottom: 1px solid #ccc;
}
body.donation2 #contents .cmn-num-list01 li .num {
  margin-left: -50px;
}

/* donation2-list01 */
body.donation2 #contents .donation2-list01 {}
body.donation2 #contents .donation2-list01 li {
  border-bottom: 1px solid #ccc;
  background: none;
  margin-bottom: 0;
  padding: 0;
}
body.donation2 #contents .donation2-list01 li:nth-child(1),
body.donation2 #contents .donation2-list01 li:nth-child(2) {
  border-top: 1px solid #ccc;
}
body.donation2 #contents .donation2-list01 li dt {
  position: relative;
}
body.donation2 #contents .donation2-list01 li dt:after {
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/icon-circle-arrow-right01-blue01.png") 0 0 no-repeat;
  background-size: 22px auto;
  width: 22px;
  height: 22px;
}

@media print, screen and (max-width: 639px) {
  body.donation2 #contents .donation2-list01 li:nth-child(2) {
    border-top: none;
  }
}

/* donation2-tbl01 */
body.donation2 #contents table.donation2-tbl01 tr th {
    padding: 16px 12px 14px;
    border: 1px solid #aaa;
    background: #e9f1f6;
    color: #333;
    font-weight: normal;
    text-align: left;
}
body.donation2 #contents table.donation2-tbl01 tr td {
    padding: 16px 12px 14px;
    border: 1px solid #aaa;
}



/* 現在実施中の支援キャンペーンページ
--------------------------------------------------------- */
body.coop_entry {}

/**/
body.coop_entry #contents .coop_entry-row01 {
    padding: 0 70px;
}
@media print, screen and (max-width: 639px) {
    body.coop_entry #contents .coop_entry-row01 {
        padding: 0;
    }
}

/**/
body.coop_entry #contents .coop_entry-charity {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    min-height: 60px;
    padding: 0 0 0 90px;
    background: url("../../img/coop_entry-img03.png") 0 0 no-repeat;
}



/* 社内での取り組み
--------------------------------------------------------- */
body.partner1 {}

/**/
body.partner1 #contents .partner1-xxx {
    display: -webkit-flex;
    display: flex;
    margin: 0 0 20px;
}
body.partner1 #contents .partner1-xxx .thumbnail {
    width: 148px;
    margin: 0;
    padding: 0 24px;
}
body.partner1 #contents .partner1-xxx .thumbnail img {
    width: 100%;
}
body.partner1 #contents .partner1-xxx .detail {
    flex: 1 1 auto;
}
body.partner1 #contents .partner1-xxx .detail .title {
    margin: 0 0 15px;
    padding: 0 0 4px;
    border-bottom: 1px solid #0099ff;
}
body.partner1 #contents .partner1-xxx .detail .text {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.5;
}



/* 企画の進め方や手続き方法について
--------------------------------------------------------- */
body.partner3 {}

/**/
body.partner3 #contents .partner3-block01 {
    margin: 0 0 0 108px;
}
@media print, screen and (max-width: 639px) {
    body.partner3 #contents .partner3-block01 {
        margin: 0 0 0 75px;
    }
}
@media print, screen and (max-width: 414px) {
    body.partner3 #contents .partner3-block01 {
        margin: 0;
    }
}

/**/
body.partner3 #contents .partner3-list01 {
    border-top: 1px solid #cccccc;
}
body.partner3 #contents .partner3-list01 li {
    display: -webkit-flex;
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #cccccc;
    background: none;
}
body.partner3 #contents .partner3-list01 li .title {
    flex: 0 0 138px;
    max-width: 138px;
    padding: 0 10px 0 0;
}
body.partner3 #contents .partner3-list01 li .detail {
    flex: 1 1 auto;
}
@media print, screen and (max-width: 639px) {
    body.partner3 #contents .partner3-list01 li .title {
        flex: 0 0 98px;
        max-width: 98px;
    }
}
@media print, screen and (max-width: 414px) {
    body.partner3 #contents .partner3-list01 li .title {
        flex: 0 0 88px;
        max-width: 88px;
    }
}

/* tieupquery-line */
body.partner3 .tieupquery-line {
  border-top: 1px solid #09f;
}

/* cmn-num-list01 */
body.partner3 #contents .cmn-num-list01 li {
  list-style: none;
  border-bottom: 1px solid #ccc;
}
body.partner3 #contents .cmn-num-list01 li .num-02 {
  margin-left: -50px;
}
body.partner3 #contents .cmn-num-list01 li.lower {
  border-bottom: none;
  margin-top: 10px;
}
body.partner3 #contents .cmn-num-list01 li.lower p .num-02 {
  white-space: nowrap;
  margin-right: 48px;
  margin-left: -70px;
  padding-left: 5px;
}
@media print, screen and (max-width: 414px) {
  body.partner3 #contents .cmn-num-list01 li.lower p .num-02 {
    margin-right: 28px;
    margin-left: -50px;
  }
}

/* よくあるご質問
--------------------------------------------------------- */
body.coop_faq {}

/* coop_faq-title  */
body.coop_faq #contents .coop_faq-title02 {
  margin: 50px 0 20px;
  font-size: 2.4rem;
  line-height: 1.2;
}
body.coop_faq #contents .coop_faq-title03 {
  font-size: 1.8rem;
  font-weight: bold;
}

@media print, screen and (max-width: 414px) {
  body.coop_faq #contents .coop_faq-title02 {
    font-size: 2.2rem;
  }
}

/* coop_faq-list  */
body.coop_faq #contents .coop_faq-list {
  border-top: 4px solid #09f;
  width: 100%;
}
body.coop_faq #contents .coop_faq-list li {
  border-bottom: 1px solid #ccc;
  background: none;
  padding: 0;
}
body.coop_faq #contents .coop_faq-list li dt,
body.coop_faq #contents .coop_faq-list li dd {
  position: relative;
  padding-left: calc(2.4rem + 28px);
}
body.coop_faq #contents .coop_faq-list li dt {
  margin: 18px 0;
  cursor: pointer;
}
body.coop_faq #contents .coop_faq-list li dt:before,
body.coop_faq #contents .coop_faq-list li dd:before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
  font-size: 2.4rem;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
  body.coop_faq #contents .coop_faq-list li dt:before { content: "Q"; }
  body.coop_faq #contents .coop_faq-list li dd:before {
    content: "A";
    color: #f00;
  }
  body.coop_faq #contents .coop_faq-list li dt:after {
    display: inline-block;
    content: '';
    position: absolute;
    top: 3px;
    right: 0;
    background: url(../img/icon-circle-arrow-right01-blue01.png) 0 0 no-repeat;
    background-size: contain;
    transform: rotate(90deg);
    width: 22px;
    height: 22px;
  }
  body.coop_faq #contents .coop_faq-list li dt.open:after {
    top: 0;
    right: -4px;
    border-radius: 50%;
    background: #aaa url(../img/icon-cross01-white01.png) center center no-repeat;
    background-size: 10px auto;
    width: 30px;
    height: 30px;
  }
@media print, screen and (max-width: 639px) {
  body.coop_faq #contents .coop_faq-list li dt,
  body.coop_faq #contents .coop_faq-list li dd { padding-left: calc(2.2rem + 20px); }
  body.coop_faq #contents .coop_faq-list li dt:before,
  body.coop_faq #contents .coop_faq-list li dd:before { font-size: 2.2rem; }
}
@media print, screen and (max-width: 414px) {
  body.coop_faq #contents .coop_faq-list li dt,
  body.coop_faq #contents .coop_faq-list li dd { padding-left: calc(2.0rem + 16px); }
  body.coop_faq #contents .coop_faq-list li dt:before,
  body.coop_faq #contents .coop_faq-list li dd:before { font-size: 2.0rem; }
  body.coop_faq #contents .coop_faq-list li dt.open:after { right: 0; }
}

/* その他のご協力方法
--------------------------------------------------------- */
body.partner4 {}

/**/
body.partner4 #contents .partner4-xxx .title {
    margin: 0 0 15px;
    padding: 0 0 4px;
    border-bottom: 1px solid #0099ff;
}

/* 企業によるご支援の事例
--------------------------------------------------------- */
body.ex {}

/* ex-title02 */
body.ex #contents .ex-title01 {
  margin-top: 50px;
  font-size: 2.4rem;
  line-height: 1.2;
}

/* ex-list02 */
body.ex #contents .ex-list02 {
  border-top: 1px solid #ccc;
}
body.ex #contents .ex-list02 li {
  border-bottom: 1px solid #ccc;
  background: none;
  padding: 0 52px 0 20px
}
body.ex #contents .ex-list02 li a,
body.ex #contents .ex-list02 li .no-link {
  display: block;
  position: relative;
  padding: 16px 0;
}
body.ex #contents .ex-list02.ex-list02-icon-circle-blue li a:after {
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  background: url("../img/icon-circle-arrow-right01-blue01.png") 0 0 no-repeat;
  background-size: contain;
  width: 22px;
  height: 22px;
}
body.ex #contents .ex-list02.ex-list02-icon-chevron li a:after {
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  font-size: 2.0rem;
  content: "\f054";
  font-weight: 900;
}
@media print, screen and (max-width: 639px) {
  body.ex #contents .ex-list02 li {
    padding: 0 32px 0 10px
  }
}

/* ex-title03 */
body.ex #contents .ex-title01 {
  margin-top: 50px;
  font-size: 2.4rem;
  line-height: 1.2;
}

/* ex-list03 */
body.ex #contents .ex-list03 {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ccc;
}
body.ex #contents .ex-list03 li {
  border-bottom: 1px solid #ccc;
  background: none;
  width: 50%;
  padding: 0 52px 0 20px
}
body.ex #contents .ex-list03 li ,
body.ex #contents .ex-list03 li .no-link {
  display: block;
  position: relative;
  padding: 16px 0;
}
body.ex #contents .ex-list03 li span {
  padding: 0 21px;
}
body.ex #contents .ex-list03.ex-list03-icon-circle-blue li a:after {
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  background: url("../img/icon-circle-arrow-right01-blue01.png") 0 0 no-repeat;
  background-size: contain;
  width: 22px;
  height: 22px;
}
body.ex #contents .ex-list03.ex-list03-icon-chevron li a:after {
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  font-size: 2.0rem;
  content: "\f054";
  font-weight: 900;
}
@media print, screen and (max-width: 639px) {
  body.ex #contents .ex-list03 li {
    width: 100%;
    padding: 16px 32px 16px 10px
  }
}

body.ex #contents details.accordion-container {}
body.ex #contents details.accordion-container .accordion-open {
  display: block;
  cursor: pointer;
  outline: none;
}
body.ex #contents details.accordion-container .accordion-open h2 {
  position: relative;
  border-radius: 10px 10px 0 0;
  border-bottom: solid 2px #ccc;
  background-color: #f8f8f8;
  padding: 10px 40px 10px 10px;
}
body.ex #contents details.accordion-container .accordion-open h2:before {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 21px;
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  font-size: 2.0rem;
  content: "\f067";
  font-weight: 900;
  color: #09f;
}
body.ex #contents details.accordion-container[open] .accordion-open h2:before {
  content: "\f068";
}
body.ex #contents details.accordion-container .accordion-content {
  animation: fadeIn 2s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; 
    transform: translateY(0px); 
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media print, screen and (max-width: 639px) {
  body.ex #contents details.accordion-container .accordion-open h2 {
    padding: 5px 30px 5px 5px;
  }
  body.ex #contents details.accordion-container .accordion-open h2:before {
    right: 13px;
    font-size: 16px;
  }
}

/* 企業によるご支援の事例
--------------------------------------------------------- */
body.coop_namelogo {}

/* coop_namelogo-list01 */
body.coop_namelogo #contents ol.cmn-num-list01 {
  padding-left: 0;
}
body.coop_namelogo #contents ol.cmn-num-list01 > li > span {
  display: block;
  margin-left: 50px;
}
body.coop_namelogo #contents ol.cmn-num-list01 > li > span .num {
  margin-left: -50px;
}

/* 対外的な告知を伴うご支援について
--------------------------------------------------------- */
body.partner2 {}

/* partner2_pagelink */
body.partner2 .partner2_pagelink {
  display: -webkit-flex;
  display: flex;
   justify-content: center;
}
body.partner2 #contents .partner2_pagelink p {
  width: 50%;
  margin: 0 20px;
}

@media print, screen and (max-width: 639px) {
  body.partner2 .partner2_pagelink {
    -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
  }
  body.partner2 #contents .partner2_pagelink p {
    width: 100%;
    margin: 10px 0;
    text-align:left;
  }
  body.partner2 #contents .partner2_pagelink .partner2-icon-link01 {
    display:block;
    margin-left: 36px;
  }
}


/* partner2-icon-link01 */
body.partner2 .partner2-icon-link01:before {
  display: inline-block;
  content: "";
  padding: 0;
  background: url("../img/icon-circle-arrow-right01-blue01.png") left 0 no-repeat;
  background-size: contain;
  transform: rotate(90deg);
  width: 22px;
  height: 22px;
  margin-right: 14px;
  margin-left: -36px;
  text-align: left;
  vertical-align: middle;
}


/* 支援先としてのユニセフの強み
--------------------------------------------------------- */
body.why {}

/* why-pic-half */
body.why .why-pic-half {
  width: 200px;
  margin: 0 auto 20px !important;
}
.url_none:hover{
 color: #333333;
}

/*20200518追加　コロナ支援協力企業*/

body.ex #contents .ex-list02.ex-list02-icon-chevron li .url_none:after{
content: none!important;
}


.acd-check{
    display: none;
}
.acd-label{

    color: #333333;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
    margin-top: 70px;
}
.acd-content{
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}


.acd-check:checked + .acd-label + .acd-content{
    height: 100%;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}
.acd-check:checked + .acd-label > h3 > .kaihei{
    transform: rotate(45deg);
}

.color_btn:hover{
 color: cornflowerblue;
}

.m-l0,
.m-r0{
 margin-left: 0!important;
 margin-right: 0!important;
}
.mt0{
 margin-top: 0!important;
 margin-bottom: 0!important;
}
.kaihei {
    display: inline-block;
    position: relative;

  }
.b_area{
 display: inline-block;
    margin-left: 25%;
}

/*20200518追加　コロナ支援協力企業　終わり*/

/*20220315追加　ウクライナ支援協力企業*/

body.ex #contents .ex-list03.ex-list03-icon-chevron li .url_none:after{
content: none!important;
}


.acd-check{
    display: none;
}
.acd-label{

    color: #333333;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
    margin-top: 70px;
}
.acd-content{
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}


.acd-check:checked + .acd-label + .acd-content{
    height: 100%;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}
.acd-check:checked + .acd-label > h3 > .kaihei{
    transform: rotate(45deg);
}

.color_btn:hover{
 color: cornflowerblue;
}

.m-l0,
.m-r0{
 margin-left: 0!important;
 margin-right: 0!important;
}
.mt0{
 margin-top: 0!important;
 margin-bottom: 0!important;
}
.kaihei {
    display: inline-block;
    position: relative;

  }
.b_area{
 display: inline-block;
    margin-left: 25%;
}

/*20220315追加　ウクライナ支援協力企業　終わり*/


/* coopbox_box_yellow
----------------------------------------------------------*/
.coopbox_box_yellow {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  background-color: #FFFFF0;
  padding: 10px;
  text-align: center;
}

/* coop_box-tbl01 */
body.coopbox #contents table.coopbox-tbl01 tr th {
    padding: 16px 12px 14px;
    border: 1px solid #aaa;
    background: #e9f1f6;
    color: #333;
    font-weight: normal;
    text-align: left;
}
body.coopbox #contents table.coopbox-tbl01 tr td {
    padding: 16px 12px 14px;
    border: 1px solid #aaa;
}

@media print, screen and (max-width: 639px) {
  body.coopbox #contents table.coopbox-tbl01 tr th {
      display: block;
  }
  body.coopbox #contents table.coopbox-tbl01 tr td {
      display: block;
  }
}