@charset "utf-8";
/* reset */
.pbAreaWrapper1 {
  position: static;
  width: auto;
  margin: 0;
}
.pbMainArea {
  float: none;
  width: auto;
}
p {
  margin: 0;
}
.page-footer {
  padding-top: 0;
}

.yearold_header_inner {
  position: relative;
  min-width: 960px;
}
.is-full .yearold_header_inner,
.is-ready .yearold_header_inner {
  z-index: 1;
}


html {
  overflow: hidden !important;
}
html.is-loaded {
  overflow: auto !important;
}
html.is-locked {
  overflow: hidden !important;
}

/* ====================================================
yearold
==================================================== */
.yearold_bg {
  position: relative;
  border-bottom: 1px solid #c9c9c9;
}
.yearold_bg.type-01 {
  background: url(/library/anshin/img/7pj/yearold_bg01_renew.png);
  background-size: cover;
  min-width: 960px;
  position: relative;
  width: 100vw;
  text-align: center;
}
.yearold_bg.type-02 {
  background: url(/library/anshin/img/7pj/yearold_bg01_renew.png);
  background-size: cover;
  min-width: 960px;
  position: relative;
  width: 100vw;
}
.yearold_bg.type-02:before {
  background: url(/library/anshin/img/7pj/left_decoration_renew.png) no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 2921px;
  position: absolute;
  top: 0;
  left: 0;
  width: 199px;
  z-index: 1;
}
.yearold_bg.type-02:after {
  background: url(/library/anshin/img/7pj/right_decoration_renew.png) no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 2877px;
  max-width: 248px;
  position: absolute;
  top: 0;
  right: 0;
  width: 248px;
  z-index: 1;
}
.yearold_bg.type-02 h1 {
  margin: auto;
  width: 1084px;
}

/* yearold_nav
==================================================== */
.yearold_nav {
  position: absolute;
  top: 33px;
  left: 31px;
  z-index: 11;
  pointer-events: none;
  transition: opacity .3s ease;
}
.yearold_nav::after {
  clear: both;
}
html.is-loaded .yearold_nav {
  pointer-events: auto;
}
html.is-locked .yearold_nav {
  opacity: 0;
  pointer-events: none;
}

.yearold_logo_anshin,
.yearold_logo_zenrosai {
  float: left;
  width: 99px;
  margin: 0 0 0 12px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 8px -4px #000000;
  overflow: hidden;
  animation: yearold_logo 1s ease .1s both;
}
@keyframes yearold_logo {
  0% {
    transform: translateX(-314.15%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.yearold_logo_anshin:first-child,
.yearold_logo_zenrosai:first-child {
  margin-left: 0;
}

.yearold_logo_anshin a,
.yearold_logo_zenrosai a {
  display: block;
  transition: opacity .3s ease;
}

.yearold_logo_anshin img,
.yearold_logo_zenrosai img {
  width: 100%;
  animation: yearold_logo_img 1s ease .1s both;
}
@keyframes yearold_logo_img {
  0% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(0);
  }
}

/* yearold_loading
==================================================== */
.yearold_loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #f8f6f3 url(/library/anshin/img/7pj/yearold_bg01_renew.png) no-repeat center top / cover;
  z-index: 10;
  overflow: hidden;
  transition: opacity 1s ease, transform 1s ease;
}
html.is-loaded .yearold_loading {
  pointer-events: none;
  opacity: 0;
  transform: scale(1.1);
}

.yearold_loading::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url(/library/anshin/img/7pj/loading_bg01.png) no-repeat center center / cover;
  animation: yearold_loading_before .5s ease .3s both;
}
@keyframes yearold_loading_before {
  0% {
    transform: scale(.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.yearold_loading_inner {
  position: absolute;
  top: 132px;
  left: 70px;
  right: 70px;
  bottom: 125px;
  max-height: 512px;
  margin: auto 0;
}

.yearold_loading_logo {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 100px;
  animation: yearold_loading_logo .5s linear .1s both;
}

@keyframes yearold_loading_logo {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  10% {
    transform: translateY(-98px);
    opacity: .5;
  }
  20% {
    transform: translateY(-94px);
    opacity: 1;
  }
  30% {
    transform: translateY(-86px);
  }
  40% {
    transform: translateY(-70px);
  }
  50% {
    transform: translateY(-38px);
  }
  60% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-50px);
  }
  80% {
    transform: translateY(-40px);
  }
  90% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.yearold_loading_logo img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.yearold_loading_text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  animation: yearold_loading_text .5s ease .1s both;
}
@keyframes yearold_loading_text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.yearold_loading_text span {
  display: inline-block;
  background: no-repeat center center / 100% 100%;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  animation: yearold_loading_text_span 2.5s linear infinite both;
}
@keyframes yearold_loading_text_span {
  0% {
    transform: translateY(0);
  }
  2% {
    transform: translateY(-8px);
  }
  4% {
    transform: translateY(-10px);
  }
  6% {
    transform: translateY(-8px);
  }
  7% {
    transform: translateY(-5px);
  }
  10% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

.yearold_loading_text span:nth-child(1) {
  width: 20px;
  height: 52px;
  background-image: url(/library/anshin/img/7pj/loading_text01.png);
  animation-delay: .1s;
}
.yearold_loading_text span:nth-child(2) {
  width: 20px;
  height: 52px;
  margin-left: 5px;
  background-image: url(/library/anshin/img/7pj/loading_text02.png);
  animation-delay: .35s;
}
.yearold_loading_text span:nth-child(3) {
  width: 23px;
  height: 53px;
  margin-left: 3px;
  background-image: url(/library/anshin/img/7pj/loading_text03.png);
  animation-delay: .6s;
}
.yearold_loading_text span:nth-child(4) {
  width: 21px;
  height: 52px;
  margin-left: 4px;
  background-image: url(/library/anshin/img/7pj/loading_text04.png);
  animation-delay: .85s;
}
.yearold_loading_text span:nth-child(5) {
  width: 8px;
  height: 53px;
  margin-left: 6px;
  background-image: url(/library/anshin/img/7pj/loading_text05.png);
  animation-delay: 1.1s;
}
.yearold_loading_text span:nth-child(6) {
  width: 22px;
  height: 53px;
  margin-left: 8px;
  background-image: url(/library/anshin/img/7pj/loading_text06.png);
  animation-delay: 1.35s;
}
.yearold_loading_text span:nth-child(7) {
  width: 18px;
  height: 52px;
  margin-left: 7px;
  background-image: url(/library/anshin/img/7pj/loading_text07.png);
  animation-delay: 1.6s;
}
.yearold_loading_text span:nth-child(8),
.yearold_loading_text span:nth-child(9),
.yearold_loading_text span:nth-child(10) {
  width: 3px;
  height: 3px;
  background-image: url(/library/anshin/img/7pj/loading_text08.png);
}
.yearold_loading_text span:nth-child(8) {
  margin-left: 6px;
  animation-delay: 1.85s;
}
.yearold_loading_text span:nth-child(9) {
  margin-left: 6px;
  animation-delay: 2.1s;
}
.yearold_loading_text span:nth-child(10) {
  margin-left: 6px;
  animation-delay: 2.35s;
}

/* yearold_header_totop
==================================================== */
.yearold_header {
  opacity: 0;
  pointer-events: none;
}
html.is-loaded .yearold_header {
  opacity: 1;
  pointer-events: auto;
}

.yearold_header_totop {
  position: absolute;
  top: 67px;
  right: 50px;
  margin: 0;
  z-index: 2;
}
.yearold_header_totop a {
  display: block;
  width: 152px;
  height: 22px;
  background: url(/library/anshin/img/7pj/totop_header.png) 0 0 no-repeat;
  background-size: 152px 22px;
}
.yearold_header_totop a:hover {
  background: url(/library/anshin/img/7pj/totop_header_hover.png) 0 0 no-repeat;
  background-size: 152px 22px;
  opacity: 1;
}
p {
  text-align: center
}
.yearold_img02 {
  margin-top: -85px;
}
.yearold_img03 {
  margin-top: 100px;
}
.yearold_img04 {
  margin-top: 130px;
}
.yearold_img05 {
  margin-top: 70px;
}
a:hover {
  opacity: .7;
}

/* Modal
==================================================== */

/* style for js */
#cboxOverlay {
  background: #000;
}

#colorbox{
  outline:0;
}

#cboxContent {
  position: relative;
  background-color: #fff;
  margin: 30px 40px 10px;
  border-radius: 18px;
}

#cboxLoadedContent {
  overflow: visible !important;
}

.yearold_modal-wrap {
  display: none;
}

.yearold_modal {
  position: relative;
  width: 841px;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
}
.yearold_modal:after {
  content: "";
  display: block;
  clear: both;
}
.yearold_modal_kv {
  display: flex;
  align-items: center;
}
.yearold_modal.modal-01 {
  padding: 52px 10px 50px 50px;
  background: url(/library/anshin/img/7pj/yearold_modal01.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.yearold_modal.modal-01-02 {
  padding: 52px 10px 50px 50px;
  background: url(/library/anshin/img/7pj/yearold_modal01_02.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.yearold_modal.modal-02 {
  padding: 78px 78px 90px;
  background: url(/library/anshin/img/7pj/yearold_modal02.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.yearold_modal.modal-03 {
  padding: 76px 78px 82px;
  background: url(/library/anshin/img/7pj/yearold_modal03.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.yearold_modal.opt-ribbon:before {
  content: "";
  position: absolute;
  width: 133px;
  height: 155px;
  background: url(/library/anshin/img/7pj/yearold_modal_ribbon.png) 0 0 no-repeat;
  background-size: 133px 155px;
  top: -23px;
  left: -29px;
}
.yearold_modal_close {
  position: absolute;
  width: 81px;
  height: 81px;
  top: -23px;
  right: -31px;
  border-radius: 50px;
  box-shadow: 0 4px 10px -5px #000;
  background-color: #fff;
}
.yearold_modal_close button {
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
  vertical-align: top;
  transition: opacity .3s ease;
}
.yearold_modal_close button:hover,
.yearold_modal_close button:active,
.yearold_modal_close button:focus {
  opacity: .7;
}
.yearold_modal_close button img {
  width: 100%;
}
.yearold_modal_copy01 {
  padding-top: 38px;
  text-align: left;
}
.yearold_modal_copy03 {
  position: relative;
  padding-left: 153px;
}
.yearold_modal_copy03 > span {
  display: block;
}
.yearold_modal_copy03 > span:first-child {
  position: absolute;
  top: -50%;
  left: 0;
  bottom: -50%;
  width: 124px;
  height: 200%;
}
.yearold_modal_copy03 > span:first-child > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto 0;
}
.yearold_modal_img {
  float: left;
}
.yearold_modal_inner {
  float: left;
  margin-left: 24px;
}
.yearold_modal_img img {
  filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.4));
}
.yearold_modal_text {
  font-size: 1.8rem;
  line-height: 1.75;
  color: #000;
  text-align: left;
}
.modal-01 .yearold_modal_text {
  margin-top: 34px;
}
.modal-02 .yearold_modal_text {
  width: 100%;
  margin-top: 50px;
}
.modal-03 .yearold_modal_text {
  margin-top: 20px;
  line-height: 2.11;
}
.yearold_modal_graf {
  margin-top: 90px;
  text-align: center;
}
.yearold_modal_graf img {
  max-width: 100%;
}
.yearold_modal_image {
  margin-top: 50px;
  text-align: center;
}
.yearold_modal_copy03 + .yearold_modal_image {
  margin-top: 71px;
}
.yearold_modal_image img {
  max-width: 100%;
}
.yearold_modal_btn {
  width: 555px;
  margin: 0 auto;
  padding-top: 28px;
  clear: both;
}
.yearold_modal_btn a {
  display: block;
}
.yearold_modal_btn img {
  width: 100%;
}

.yearold_modal_bg-area {
  margin-top: 42px;
  padding: 59px 52px 49px;
  background: url(/library/anshin/img/7pj/yearold_modal_bg01.jpg) repeat left top;
}
.yearold_modal_bg-area:first-child {
  margin-top: 0;
}
.yearold_modal_bg-area_section {
  margin-top: 46px;
}
.yearold_modal_bg-area_section:first-child {
  margin-top: 0;
}
.yearold_modal_bg-area_title {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.32;
  text-align: center;
}
.yearold_modal_bg-area_title > span {
  display: inline-block;
  position: relative;
  padding: 0 1.4em;
}
.yearold_modal_bg-area_title > span::before,
.yearold_modal_bg-area_title > span::after {
  content: '～';
  display: block;
  position: absolute;
  top: -1px;
  bottom: 1px;
  width: 1em;
  height: 1em;
  margin: auto 0;
}
.yearold_modal_bg-area_title > span::before {
  left: 0;
}
.yearold_modal_bg-area_title > span::after {
  right: 0;
}

/* toTop
==================================================== */
.yearold_totop_wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.yearold_totop {
  position: absolute;
  margin: 0;
  right: 32px;
  bottom: 43px;
  z-index: 100;
  transform: translateX(150%);
  transition: transform 2s ease;
}

.is-show .yearold_totop {
  transform: translateX(0);
}

.is-fixed .yearold_totop {
  position: fixed;
}

.yearold_totop a {
  display: block;
  width: 121px;
  height: 168px;
  animation: yearold_totop_a 4s linear infinite both;
  transform-origin: 21.14% top;
  backface-visibility: hidden;
}

@keyframes yearold_totop_a {
  0% {
    transform: translateX(-10px) rotate(-1deg);
  }
  40% {
    transform: translateX(8px) rotate(1deg);
  }
  50% {
    transform: translateX(10px) rotate(1deg);
  }
  90% {
    transform: translateX(-8px) rotate(-1deg);
  }
  100% {
    transform: translateX(-10px) rotate(-1deg);
  }
}

.yearold_totop a img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  animation: yearold_totop_img 1s ease infinite alternate both;
}

@keyframes yearold_totop_img {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}


/* Movie Mute Button
==================================================== */
.yearold_movie_btn {
  position: absolute;
  margin: 0;
  top: 54px;
  right: 39px;
  z-index: 2;
  transition: opacity .3s ease, transform .3s ease;
}
.is-full .yearold_movie_btn {
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
}
.yearold_movie_btn button {
  display: block;
  width: 91px;
  height: 75px;
  padding: 0;
  border: none;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-position .3s ease, opacity .3s ease;
  background: url(/library/anshin/img/7pj/img_icon01.png) no-repeat center top / 100% 300%;
}
.yearold_movie_btn button:hover {
  opacity: .7;
}
.yearold_movie_btn button.is-current {
  background-position: center bottom;
}


/* Movie Close Button
==================================================== */
.yearold_close_btn {
  position: absolute;
  margin: 0;
  top: 38px;
  right: 41px;
  z-index: 2;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  opacity: 0;
  transform: scale(0);
}
.is-full .yearold_close_btn {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
}

.yearold_close_btn button {
  display: block;
  width: 91px;
  height: 75px;
  padding: 0;
  border: none;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-position .3s ease, opacity .3s ease;
  background: url(/library/anshin/img/7pj/img_icon02.png) no-repeat center center / 100%;
}
.yearold_close_btn button:hover {
  opacity: .7;
}

/* Movie
==================================================== */
.yearold_movie_wrap_outside {
  position: relative;
  height: 739px;
}
.yearold_movie_wrap {
  position: absolute;
  width: 960px;
  height: 620px;
  margin: 119px auto 0;
  top: 0;
  left: 0;
  right: 0;
}
.yearold_movie {
  position: relative;
  width: 1102px;
  height: 620px;
  margin: auto -71px;
  transition: transform 1s ease, background-color .3s ease;
  backface-visibility: hidden;
  transform: scale(0);
}
.yearold_movie.is-full {
  background-color: #000;
  margin: auto;
}
.is-loaded .yearold_movie {
  transform: scale(1);
}
.yearold_movie:after {
  position: absolute;
  content: "";
  background: url(/library/anshin/img/7pj/movie_musk.png) 0 0 no-repeat;
  background-size: 100% 100%;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.yearold_movie.is-full:after {
  opacity: 0;
  transform: scale(1.5);
}
.yearold_movie_inner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transition: left .3s ease, right .3s ease;
}
.yearold_movie_inner video {
  width: 100%;
  height: 100%;
  border-radius: 190px;
  cursor: pointer;
  transition: border-radius .3s ease .2;
}
.is-full .yearold_movie_inner video {
  border-radius: 0;
  cursor: default !important;
}
.yearold_movie_text {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.3);
  pointer-events: none;
  transition: opacity .3s ease;
  opacity: 0;
}
.yearold_movie_inner:hover .yearold_movie_text {
  transition-delay: 1s;
  transition-duration: 1s;
  opacity: 1;
}
.is-full .yearold_movie_text {
  transition-delay: 0s !important;
  transition-duration: .3s !important;
  opacity: 0 !important;
}
.yearold_movie_text p {
  display: table;
  width: 100%;
  height: 100%;
  font-size: 5rem;
  color: #fff;
}
.yearold_movie_text p span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* Title
==================================================== */
.yearold_title_wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}
.yearold_title_wrap:before {
  position: absolute;
  content: "";
  width: 114px;
  height: 248px;
  background: url(/library/anshin/img/7pj/text01_bg-left_pc.png) 0 0 no-repeat;
  background-size: 114px 248px;
  top: 101px;
  left: -114px;
}
.yearold_title_wrap:after {
  position: absolute;
  content: "";
  width: 207px;
  height: 315px;
  background: url(/library/anshin/img/7pj/text01_bg-right_pc.png) 0 0 no-repeat;
  background-size: 207px 315px;
  top: 6px;
  right: -128px;
}
.yearold_title {
  width: 718px;
  margin: 0 auto;
}
.yearold_title img {
  width: 100%;
  padding-top: 53px;
}
.yearold_title_copy {
  width: 577px;
  margin: 50px auto 0;
}
.yearold_title_btn {
  width: 199px;
  margin: 40px auto 0;
  border-radius: 30px;
  background-color: #fff;
}
.yearold_title_btn a {
  display: block;
}

/* flowmap
==================================================== */
.yearold_flowmap_wrap {
  position: relative;
  width: 960px;
  height: 2029px;
  margin: 51px auto 0;
}

.yearold_flowmap {
  position: absolute;
  top: 0;
  left: -85px;
  right: -85px;
  width: 1130px;
  height: 100%;
  background: url(/library/anshin/img/7pj/main_bg_pc.png) right top no-repeat;
  background-size: auto 100%;
}

/* anime
==================================================== */
.anime {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.anime_talk {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  width: 0;
  transition: width .3s ease;
}
.anime_talk img {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
}

.anime_image {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.anime_image img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
}
.anime_image.frames-11 img { animation: frames-11 1.1s steps(10) infinite; }
@keyframes frames-11 { 0% { transform: translateX(0); } 100% { transform: translateX(-90.9090909091%); } }
.anime_image.frames-20 img { animation: frames-20 2s steps(19) infinite; }
@keyframes frames-20 { 0% { transform: translateX(0); } 100% { transform: translateX(-95%); } }
.anime_image.frames-30 img { animation: frames-30 3s steps(29) infinite; }
@keyframes frames-30 { 0% { transform: translateX(0); } 100% { transform: translateX(-96.6666666667%); } }
.anime_image.frames-40 img { animation: frames-40 4s steps(39) infinite; }
@keyframes frames-40 { 0% { transform: translateX(0); } 100% { transform: translateX(-97.5%); } }
.anime_image.frames-80 img { animation: frames-80 8s steps(79) infinite; }
@keyframes frames-80 { 0% { transform: translateX(0); } 100% { transform: translateX(-98.75%); } }
.anime_image.frames-140 img { animation: frames-140 14s steps(139) infinite; }
@keyframes frames-140 { 0% { transform: translateX(0); } 100% { transform: translateX(-99.2857142857%); } }
.anime:not(.is-active) .anime_image.sync-anime img { animation: none; }
.anime.is-active .anime_image.sync-stop img { animation: none; }

/* ひろとくん */
.walk-wrap {
  position: absolute;
  top: 110px;
  left: 530px;
  width: 71px;
  height: 101px;
  text-align: center;
  pointer-events: none;
}

.walk {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  opacity: 0;
  transform: scale(.5) translateX(99px);
  overflow: hidden;
}
.is-initialized .walk { transition: transform .3s ease, opacity .3s ease, margin .3s linear; }
.is-initialized.is-moving .walk { transition: transform .3s ease, opacity .3s ease, margin .1s ease; }
.is-start .walk {
  opacity: 1;
  transform: scale(1);
}
.is-start.is-end .walk {
  opacity: 0;
  transform: scale(.5) translate(-99px, 99px);
}

.walk_inner {
  height: 100%;
  transition: transform .3s ease;
  overflow: hidden;
}
.is-start.is-reverse .walk .walk_inner { transform: scale(-1, 1); }
.is-start.is-end.is-reverse .walk .walk_inner { transform: scale(-.5, .5) translate(-99px, 99px); }

/* たいよう */
.anime.opt-00 {
  top: -44px;
  right: 159px;
  width: 176px;
  height: 157px;
}

/* おばあちゃん・おじいちゃん */
.anime.opt-01 {
  top: 264px;
  right: 341px;
  width: 141px;
  height: 146px;
}
.anime.opt-01 .anime_talk {
  top: 9px;
  left: 130px;
  height: 39px;
}
.anime.opt-01.is-active .anime_talk {
  width: 110px;
}

/* けいかん */
.anime.opt-02 {
  top: 210px;
  left: 171px;
  width: 190px;
  height: 184px;
}
.anime.opt-02 .anime_talk {
  top: -36px;
  left: 54px;
  height: 35px;
}
.anime.opt-02.is-active .anime_talk {
  width: 120px;
}

/* とり */
.anime.opt-03 {
  top: 399px;
  right: 140px;
  width: 52px;
  height: 67px;
}

/* おばちゃん */
.anime.opt-04 {
  top: 725px;
  left: 384px;
  width: 122px;
  height: 121px;
}
.anime.opt-04 .anime_talk {
  top: 28px;
  left: 119px;
  height: 15px;
}
.anime.opt-04.is-active .anime_talk {
  width: 77px;
}

/* くるま */
.anime.opt-05 {
  top: 780px;
  right: 435px;
  width: 133px;
  height: 79px;
}

/* おんなのこ */
.anime.opt-06 {
  top: 770px;
  right: 88px;
  width: 174px;
  height: 145px;
}
.anime.opt-06 .anime_talk {
  top: 53px;
  left: -63px;
  height: 36px;
}
.anime.opt-06.is-active .anime_talk {
  width: 80px;
}

/* おねえさん */
.anime.opt-07 {
  top: 1308px;
  left: 310px;
  width: 170px;
  height: 142px;
}
.anime.opt-07 .anime_talk {
  top: -36px;
  left: 31px;
  height: 36px;
}
.anime.opt-07.is-active .anime_talk {
  width: 107px;
}

/* おとこのこ */
.anime.opt-08 {
  z-index: 2;
  top: 1276px;
  left: 650px;
  width: 124px;
  height: 100px;
}
.anime.opt-08 .anime_talk {
  top: -22px;
  left: 4px;
  height: 17px;
}
.anime.opt-08.is-active .anime_talk {
  width: 61px;
}

/* にじ */
.anime.opt-09 {
  top: 1235px;
  right: 190px;
  width: 217px;
  height: 103px;
}

/* おにいさん */
.anime.opt-10 {
  top: 1718px;
  right: 96px;
  width: 247px;
  height: 236px;
}
.anime.opt-10 .anime_talk {
  top: 117px;
  left: -58px;
  height: 36px;
}
.anime.opt-10.is-active .anime_talk {
  width: 75px;
}

/* あかあさん・おとうさん */
.anime.opt-11 {
  z-index: 0;
  top: 1757px;
  left: 381px;
  width: 170px;
  height: 147px;
}
.anime.opt-11 .anime_talk {
  top: -21px;
  left: 31px;
  height: 17px;
}
.anime.opt-11.is-active .anime_talk {
  width: 108px;
}


/* Pop
==================================================== */
.yearold_pop,
.yearold_pop_main,
.yearold_pop_sub,
.yearold_pop_btn {
  position: absolute;
}

.yearold_pop {
  z-index: 2;
}

.yearold_pop_main {
  transition: transform .5s ease, opacity .5s ease;
  transform: scale(.5);
  opacity: 0;
}
.is-active .yearold_pop_main {
  transform: scale(1);
  opacity: 1;
}
.yearold_pop_main img {
  filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.4));
}

.yearold_pop_sub {
  transition: transform .5s ease, opacity .5s ease;
  transform: translateY(50px);
  opacity: 0;
}
.is-active .yearold_pop_sub {
  transition-delay: .3s;
  transform: translateY(0);
  opacity: 1;
}
.yearold_pop_sub.is-shadow img {
  filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.4));
}


.yearold_pop_btn {
  transition: transform .5s ease, opacity .5s ease;
  transform: scale(.5);
  opacity: 0;
  pointer-events: none;
  border-radius: 30px;
  background-color: #fff;
}
.is-active .yearold_pop_btn {
  transition-delay: .3s;
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.yearold_pop.type-01 {
  top: 395px;
  left: 198px;
}
.yearold_pop.type-01 .yearold_pop_main {
  top: 0;
  left: 0;
}
.yearold_pop.type-01 .yearold_pop_sub {
  top: 41px;
  left: 371px;
}
.yearold_pop.type-01 .yearold_pop_btn {
  top: 238px;
  left: 373px;
}
.yearold_pop.type-02 {
  top: 883px;
  left: 494px;
}
.yearold_pop.type-02 .yearold_pop_main {
  top: 0;
  left: 0;
}
.yearold_pop.type-02 .yearold_pop_sub {
  top: 9px;
  left: 264px;
}
.yearold_pop.type-02 .yearold_pop_btn {
  top: 254px;
  left: 78px;
}
.yearold_pop.type-03 {
  top: 1415px;
  left: 226px;
}
.yearold_pop.type-03 .yearold_pop_main {
  top: 0;
  left: 402px;
}
.yearold_pop.type-03 .yearold_pop_sub {
  top: 38px;
  left: 0;
}
.yearold_pop.type-03 .yearold_pop_btn {
  top: 235px;
  left: 168px;
}

/* pickup
==================================================== */
.pickup {
  width: 800px;
  margin: 66px auto 0;
}

.pickup_title {
  text-align: center;
}

.pickup_text {
  margin-top: 24px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.78;
  text-align: center;
}

.pickup_text > span {
  display: inline-block;
  background: url(/library/anshin/img/7pj/index_pickup_bg02.png) no-repeat center bottom;
}

.pickup_text_banner {
  margin-top: 40px;
}

.pickup_text_banner > a {
  display: block;
  border-radius: 20px 20px 20px 20px;
}

.pickup_text_banner > a:hover,
.pickup_text_banner > a:active {
  opacity: 1;
}

.pickup_text_banner > a:hover img,
.pickup_text_banner > a:active img {
  opacity: .7;
}

.pickup_text_banner_item {
  position: relative;
}

.pickup_text_banner_item_badge {
  display: block;
  position: absolute;
  z-index: 1;
  top: -13px;
  left: -18px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
}

.pickup_text_banner_item_badge > img {
  width: 100%;
  height: 100%;
  transition: opacity .3s ease;
}

.pickup_text_banner_item_banner {
  display: block;
  border-radius: 20px 20px 20px 20px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 32px 14px rgba(0,0,0,.05);
  overflow: hidden;
}

.pickup_text_banner_item_banner > img {
  width: 100%;
  transition: opacity .3s ease;
}

/* story
==================================================== */
.story {
  margin-top: 120px;
  border-top: 15px solid #009944;
  padding: 120px 0;
  background-color: #fff;
}

.story_inner {
  width: 960px;
  margin: 0 auto;
}

.story_header_title {
  position: relative;
  width: 228px;
  margin: 0 auto;
  padding-bottom: 10px;
  text-align: center;
}

.story_header_title::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 0;
  margin: 0 auto;
  border-top: 2px solid #4ab89d;
}

.story_header_title > img {
  max-width: 100%;
}

.story_header_read {
  margin-top: 27px;
  text-align: center;
}

.story_header_read > img {
  max-width: 100%;
}

.story_text {
  margin-top: 39px;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.22;
  text-align: center;
}

.story_image {
  margin: 40px auto 0;
  width: 500px;
  text-align: center;
}

.story_image > img {
  max-width: 100%;
}

.story_link {
  width: 230px;
  margin: 50px auto 0;
  border-radius: 4px;
  font-size: 1.8rem;
  font-weight: 600;
  background-color: #fff;
  text-align: center;
}

.story_link > a {
  display: block;
  position: relative;
  border: 1px solid #009944;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 12px 25px 11px 15px;
  background-color: #fff;
  color: #009944;
}

.story_link > a:hover,
.story_link > a:active {
  text-decoration: none;
}

.story_link > a::after {
  content: '';
  display: block;
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  width: 4px;
  height: 8px;
  margin: auto 0;
  background: url(/library/anshin/img/7pj/index_story_bg01.png) no-repeat center center / 100% 100%;
}
/* footer
==================================================== */
#footerArea {
  margin-top: 0;
}

.footer-totop {
  display: none;
}