@import url("https://fonts.googleapis.com/css?family=Cardo|Pathway+Gothic+One");

.charity_title { text-align: center; margin: 20px auto 20px; font-size: 17px;}
.charity_title hr { border: none; border-bottom: 2px solid #000; width: 70px; margin: 10px auto 0;}


.charity_kv { text-align: center;}


.charity_letter { margin: 40px auto;}
.charity_letter_txt {text-align: center; margin: 40px auto !important; font-size: 15px; font-weight: bold; line-height: 35px;}
.charity_letter_message { margin: 30px auto 0;}
.charity_letter_message p { font-size: 14px; line-height: 36px; background:url(/template/default/img/abouts/charity/bg-note.png) bottom; margin: 0 5px; padding: 0 5px; }

@media only screen and (min-width: 768px) {
	.charity_letter_message p { font-size: 15px;}

}


.breadcrumb { background: #fff; margin: 0;}
.footer_sticky { display: none !important;}



:root { --scale: 0.1; --space: 8vmin; }

@media (prefers-reduced-motion) { 
    :root {   --scale: 0; }
}


.section { transform-origin: center top; transform: scaleY(calc(1 - var(--scale))); }
.section > * { transform-origin: center top; transform: scaleY(calc(1 / (1 - var(--scale)))); }
.section-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: bold; line-height: 1.125; }

.content { position: relative; margin: 10vh auto 0; padding: var(--space); max-width: 55ch; width: calc(100% - var(--space)); background-color: rgba(255,255,255,.95); padding: 10px 10px; }
.content > * + * { margin-top: 2rem; }

.image-container { position: sticky; top: 0; width: 100vw; height: 50vh; z-index: -2; }
.image-container img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.image-container::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; 
    /*
  background: linear-gradient(
    to bottom,
    hsla(5, 15%, 5%, 0) 0%,
    hsla(5, 15%, 5%, 0.013) 8.1%,
    hsla(5, 15%, 5%, 0.049) 15.5%,
    hsla(5, 15%, 5%, 0.104) 22.5%,
    hsla(5, 15%, 5%, 0.175) 29%,
    hsla(5, 15%, 5%, 0.259) 35.3%,
    hsla(5, 15%, 5%, 0.352) 41.2%,
    hsla(5, 15%, 5%, 0.45) 47.1%,
    hsla(5, 15%, 5%, 0.55) 52.9%,
    hsla(5, 15%, 5%, 0.648) 58.8%,
    hsla(5, 15%, 5%, 0.741) 64.7%,
    hsla(5, 15%, 5%, 0.825) 71%,
    hsla(5, 15%, 5%, 0.896) 77.5%,
    hsla(5, 15%, 5%, 0.951) 84.5%,
    hsla(5, 15%, 5%, 0.987) 91.9%,
    hsl(5, 15%, 5%) 100%
  ); */
}

@keyframes fadein { 
    to { opacity: 1; transform: translateY(0); }
}
@media only screen and (min-width: 768px) {
  .content { max-width: 68ch; padding: 30px 50px; }
  .image-container { position: sticky; top: 0; width: 100vw; height: auto; text-align: center; background: #f1f6f7;}
  .image-container img { position: relative;; width: 800px; height: auto; margin: 0 auto;  }

}






/*timeline*/

.timeline { display: flex; margin: 0 auto; flex-wrap: wrap; flex-direction: column; max-width: 700px; position: relative; }
.timeline__content-title { font-weight: normal; font-size: 18px; margin: 0px 0 0 0; transition: 0.4s; padding: 0 0px; box-sizing: border-box; font-family: "Pathway Gothic One", sans-serif; color: #555; }
.timeline__content-title em { font-style: normal; }
.timeline__content-title span { font-size: 22px; line-height: 28px; display: block; color: #000; }

.timeline__content-desc { margin: 0; font-size: 15px; box-sizing: border-box; color: rgba(0, 0, 0, 0.7); font-weight: normal; line-height: 25px; }
.timeline:before { position: absolute; left: 50%; width: 2px; height: 100%; margin-left: -1px; content: ""; background: rgba(0, 0, 0, 0.07); }
@media only screen and (max-width: 767px) {
	.timeline:before { left: 30px; }
}

.timeline-item { padding: 40px 0; opacity: 0.3; filter: blur(2px); transition: 0.5s; box-sizing: border-box; width: calc(50% - 40px); display: flex; position: relative; transform: translateY(-80px); }
.timeline-item:before { content: attr(data-text); letter-spacing: 3px; width: 100%; position: absolute; color: rgba(0, 0, 0, 0.5); font-size: 14px; font-family: "Pathway Gothic One", sans-serif; border-left: 2px solid rgba(0, 0, 0, 0.5); top: 70%; margin-top: -5px; padding-left: 15px; opacity: 0; right: calc(-100% - 39px); }
.timeline-item:nth-child(even) { align-self: flex-end; }
.timeline-item:nth-child(even):before { right: auto; text-align: right; left: calc(-100% - 39px); padding-left: 0; border-left: none; border-right: 2px solid rgba(0, 0, 0, 0.5); padding-right: 15px; }

.timeline-item--active { opacity: 1; transform: translateY(0); filter: blur(0px); }
.timeline-item--active:before { top: 50%; transition: 0.3s all 0.2s; opacity: 1; }
.timeline-item--active .timeline__content-title { margin: 20px 0 10px 0; }
@media only screen and (max-width: 767px) {
	.timeline-item { align-self: baseline !important; width: 100%; padding: 75px 20px 75px 60px; }
  	.timeline-item:before { display: none; left: 10px !important; padding: 0 !important; top: 50px; text-align: center !important; width: 60px; border: none !important; }
  	.timeline-item:first-child { padding-top: 0px; }
  	.timeline-item:last-child { padding-bottom: 40px; }
}
.timeline__img { max-width: 100%; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4); }
.timeline-container { width: 100%; position: relative; padding: 30px 0 0; transition: 0.3s ease 0s; background-attachment: fixed; background-size: cover; background-position: center; }
.timeline-container:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.85); content: ""; }
.timeline-header { width: 100%; text-align: center; margin-bottom: 80px; position: relative; }
.timeline-header__title { color: #fff; font-size: 46px; font-family: Cardo; font-weight: normal; margin: 0; }
.timeline-header__subtitle { color: rgba(255, 255, 255, 0.5); font-family: "Pathway Gothic One", sans-serif; font-size: 16px; letter-spacing: 5px; margin: 10px 0 0 0; font-weight: normal; }