@charset "UTF-8"; 

 @media screen and (min-width: 768px),print { 

#contentsmain {margin: 0 auto 30px;position: relative;background: url(../images/character/contentsmain-back01.svg) no-repeat center center #E9E7DE;}
#contentsmain .inner-Box {margin: 0 auto;position: relative;height: 792px;max-width: 1280px;}
#contentsmain .inner-Box figure.img00 {position: absolute;top: 75px;left: 50%;margin-left: -402px;width: 26.5rem;}
#contentsmain .inner-Box figure.img00 img{  }
#contentsmain .inner-Box h2 {text-align: center;padding: 282px 0 0;width: 53.5rem;margin: 0 auto;}
#contentsmain .inner-Box h2 span{  }
#contentsmain .inner-Box span.mcicon {display: block;line-height: 1;position: absolute;top: 418px;left: 50%;margin-left: -536px;}
#contentsmain .inner-Box figure.img01 {position: absolute;bottom: -7px;left: -65px;display: block;width: 37.8rem;transform: rotate(20deg);transform-origin: center;}
#contentsmain .inner-Box figure.img02 {position: absolute;bottom: 6px;right: 84px;width: 21.8rem;transform: rotate(-21deg);transform-origin: center;}
#contentsmain .inner-Box img{width: 100%;height: auto;}

@keyframes pyokoLeftTop { 0% { transform: translate(-20px, -20px) scale(0.8); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes pyokoLeftBottom { 0% { transform: translate(-20px, 20px) scale(0.8) rotate(20deg); } 100% { transform: translate(0, 0) scale(1) rotate(20deg); } }
@keyframes pyokoRightBottom { 0% { transform: translate(20px, 20px) scale(0.8) rotate(-21deg); } 100% { transform: translate(0, 0) scale(1) rotate(-21deg); } }
#contentsmain .img00, #contentsmain .img01, #contentsmain .img02 { animation-fill-mode: both; animation-duration: 0.6s; }
#contentsmain .img00 { animation-name: pyokoLeftTop; animation-delay: 0s; }
#contentsmain .img01 { animation-name: pyokoLeftBottom; animation-delay: 0.2s; }
#contentsmain .img02 { animation-name: pyokoRightBottom; animation-delay: 0.4s; }

.seo_bread_list{margin-bottom: -170px;z-index: 5;color: #fff;top: -48px;}
.seo_bread_list img{ -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.contentsformback{background: #1788A0;position: relative;z-index: 3;padding: 11px 0 116px;margin-bottom: -40px;}
.contentsformback::before{content: "";display: block;width: 100%;height: 156px;background: url(../images/contact/contentsform-back.svg)no-repeat top center;position: absolute;top: -156px;left: 0;background-size: cover;}

#contents01 {margin: 0 auto;position: relative;background: url('../images/character/contents01-back01.png')no-repeat top center;background-size: 100% auto;padding: 158px 0 230px;}
#contents01 .inner-Box {margin: 0 auto 100px;position: relative;padding: 0 4rem;max-width: 1180px;overflow: visible;}
#contents01 .inner-Box h2 {font-size: 2.4rem;line-height: 1.75;font-weight: 500;letter-spacing: 0.48rem;margin-bottom: -8px;position: relative;text-align: center;color: #fff;}
#contents01 .inner-Box .tticon{text-align: center;display: block;margin-bottom: 50px;}
#contents01 .inner-Box .tticon img{ -webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);}
#contents01 .inBox { margin: 0 auto; position: relative; overflow: visible; }
#contents01 .inBox figure.img01 {position: absolute;bottom: -13px;left: 11rem;width: 31.76vw;max-width: 341px;transition: all 0.3s ease-in-out;overflow: visible;}
#contents01 .inBox figure.img01 img{width: 100%;}
/* 初期状態：隠しておく */
#contents01 .inBox figure.img01 {
    opacity: 0;
    transform: translateY(-100px); /* 開始位置 */
  }
  
  /* クラスがついたらアニメーション実行 */
  #contents01 .inBox figure.img01.is-animated {
    animation: bounceInDown 1s forwards ease-out;
  }
  
  /* バウンドアニメーションの定義 */
  @keyframes bounceInDown {
    20% {
      opacity: 0;
      transform: translateY(-100px);
    }
    40% {
      opacity: 1;
      transform: translateY(0); /* 一度地面に着く */
    }
    60% {
      opacity: 1;

      transform: translateY(-20px); /* バウンドして浮く */
    }
    100% {
      opacity: 1;

      transform: translateY(0); /* 最終位置 */
    }
    100% {
        opacity: 1;
  
        transform: translateY(0); /* 最終位置 */
      }
  }


#contents01 .inBox figure.img01::before{content: "";display: block;width: 68.68%;aspect-ratio: 234 / 252.62;height: auto;background: url(../images/character/contents01-img01.svg) no-repeat top left;background-size: contain;position: absolute;top: -4rem;left: -17.89%;opacity: 0;transition: all 0.3s ease-in-out;}
#contents01 .inBox figure.img01.anifix::before{opacity: 1;}

#contents01 .textinBox {margin: 0 0 0 auto;position: relative;border: 2px solid #000000;background: #fff;border-radius: 15px;padding: 3rem;width: 55.7%;}
#contents01 .textinBox::before{content: "";display: block;width: 47px;height: 40px;background: url(../images/character/contents01-icon03.svg)no-repeat top left;position: absolute;top: 147px;left: -47px;}
#contents01 .textinBox p.text {font-size: 1.6rem;line-height: 2.5;font-weight: 500;letter-spacing: 0.16rem;margin-bottom: 0px;position: relative;text-align: center;}
#contents01 .inner-Box2{margin: 0 auto;position: relative;background: url('../images/character/contents01-back02.svg')no-repeat top center;max-width: 1007px;height: 663px;padding: 74px 0 0;}
#contents01 .inner-Box2 span.icon01 {display: block;line-height: 1;position: absolute;top: -56px;left: -2px;}
#contents01 .inner-Box2 span.icon01 img {  }
#contents01 .inner-Box2 h3.f-en {font-size: 3rem;line-height: 1.75;font-weight: 700;letter-spacing: 0.3rem;margin-bottom: 20px;position: relative;text-align: center;color: #1788A0;}
#contents01 .inner-Box2 ul.list {margin: 0 auto;width: 668px;}
#contents01 .inner-Box2 ul li { position: relative; }
#contents01 .inner-Box2 ul li:nth-child(3n) { margin-right: 0px; }
#contents01 .inner-Box2 p.ltext {font-size: 1.6rem;line-height: 1.8;font-weight: 400;letter-spacing: 0rem;margin-bottom: 25px;position: relative;padding: 0 0 0 89px;}
#contents01 .inner-Box2 p.ltext span {font-size: 1.6rem;letter-spacing: 0;font-weight: bold;color: #1788A0;position: absolute;top: 0;left: 0;}
#contents01 .inner-Box2 span.icon02 {display: block;line-height: 1;position: absolute;bottom: -41px;right: -14px;}
#contents01 .inner-Box2 span.icon02 img {  }


 }
 @media screen and (min-width:768px) and ( max-width:1919px) {
	
    #contents01{ background-size: 1920px auto;}
	
}
@media screen and (min-width:768px) and ( max-width:1000px) {

#contents01 .inBox figure.img01 {left: 3rem;}
#contentsmain .inner-Box span.mcicon{ left: 3rem; margin-left: 0;}

}


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


    #contentsmain {margin: 0 auto 8.0vw;position: relative;background: url(../images/character/contentsmain-back01.svg) no-repeat top 19.2vw center #E9E7DE;background-size: 54vw auto;}
#contentsmain .inner-Box {position: relative;height: 98vw;}
#contentsmain .inner-Box figure.img00 {position: absolute;top: 0;left: 19.3vw;margin-left: 0vw;width: 28.1vw;}
#contentsmain .inner-Box figure.img00 img{  }
#contentsmain .inner-Box h2 {text-align: center;padding: 32.5vw 16.4vw 0 16.7vw;}
#contentsmain .inner-Box h2 span{  }
#contentsmain .inner-Box span.mcicon {display: block;line-height: 1;position: absolute;top: 64.9vw;left: 21.4vw;margin-left: 0vw;width: 14vw;}
#contentsmain .inner-Box figure.img01 {position: absolute;bottom: -4vw;left: 7.8vw;display: block;width: 35vw;transform: rotate(20deg);transform-origin: center;}
#contentsmain .inner-Box figure.img02 {position: absolute;bottom: -1.8vw;right: 3.4vw;width: 21vw;transform: rotate(-21deg);transform-origin: center;}
#contentsmain .inner-Box img{width: 100%;height: auto;}

@keyframes pyokoLeftTop { 0% { transform: translate(0vw, 0vw) scale(0.8); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes pyokoLeftBottom { 0% { transform: translate(0vw, 5.33vw) scale(0.8) rotate(20deg); } 100% { transform: translate(0, 0) scale(1) rotate(20deg); } }
@keyframes pyokoRightBottom { 0% { transform: translate(5.33vw, 5.33vw) scale(0.8) rotate(-21deg); } 100% { transform: translate(0, 0) scale(1) rotate(-21deg); } }
#contentsmain .img00, #contentsmain .img01, #contentsmain .img02 { animation-fill-mode: both; animation-duration: 0.6s; }
#contentsmain .img00 { animation-name: pyokoLeftTop; animation-delay: 0s; }
#contentsmain .img01 { animation-name: pyokoLeftBottom; animation-delay: 0.2s; }
#contentsmain .img02 { animation-name: pyokoRightBottom; animation-delay: 0.4s; }

.seo_bread_list{margin-bottom: 0vw;z-index: 5;color: #fff;top: 0vw;}
.seo_bread_list img{ -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.contentsformback{background: #1788A0;position: relative;z-index: 3;padding: 2.93vw 0 30.93vw;margin-bottom: 0vw;}
.contentsformback::before{content: "";display: block;width: 100%;height: 41.6vw;background: url(../images/contact/contentsform-back.svg)no-repeat top center;position: absolute;top: 0vw;left: 0;background-size: cover;}



#contents01 {position: relative;background: url('../images/character/sp-contents01-back01.png')no-repeat top center;background-size: 100% auto;padding: 22.13vw 0 61.33vw;margin-bottom: -37.6vw;}
#contents01 .inner-Box {margin: 0 auto 10.67vw;position: relative;overflow: visible;}
#contents01 .inner-Box h2 {font-size: 5.87vw;line-height: 1.75;font-weight: 500;letter-spacing: 1.17vw;margin-bottom: -1.1vw;position: relative;text-align: center;color: #fff;}
#contents01 .inner-Box .tticon{text-align: center;display: block;margin: 0 46.1vw 14.33vw;}
#contents01 .inner-Box .tticon img{ -webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);}
#contents01 .inBox { margin: 0 4vw; position: relative; overflow: visible; }
#contents01 .inBox figure.img01 {position: relative;bottom: 0vw;margin: 0 11.6vw 11.3vw 22.1vw;transition: all 0.3s ease-in-out;overflow: visible;}
#contents01 .inBox figure.img01 img{width: 100%;}
#contents01 .inBox figure.img01::before{content: "";display: block;width: 40.75vw;aspect-ratio: 234 / 252.62;height: auto;background: url(../images/character/contents01-img01.svg) no-repeat top left;background-size: contain;position: absolute;top: -7.65vw;left: -12vw;transition: all 0.3s ease-in-out;opacity: 0;}
/* 初期状態：隠しておく */
#contents01 .inBox figure.img01 {
    opacity: 0;
    transform: translateY(-30vw); /* 開始位置 */
  }
  
  /* クラスがついたらアニメーション実行 */
  #contents01 .inBox figure.img01.is-animated {
    animation: bounceInDown 1s forwards ease-out;
  }
  
  /* バウンドアニメーションの定義 */
  @keyframes bounceInDown {
    20% {
      opacity: 0;
      transform: translateY(-30vw);
    }
    40% {
      opacity: 1;
      transform: translateY(0); /* 一度地面に着く */
    }
    60% {
      opacity: 1;

      transform: translateY(-6vw); /* バウンドして浮く */
    }
    100% {
      opacity: 1;

      transform: translateY(0); /* 最終位置 */
    }
    100% {
        opacity: 1;
  
        transform: translateY(0); /* 最終位置 */
      }
  }


#contents01 .inBox figure.img01.anifix::before{opacity: 1;}


#contents01 .textinBox {margin: 0 1.5vw 0;position: relative;border: 0.53vw solid #000000;background: #fff;border-radius: 4.0vw;padding: 8.4vw 3vw;}
#contents01 .textinBox::before{content: "";display: block;width: 8.53vw;height: 7.57vw;background: url(../images/character/sp-contents01-icon03.svg)no-repeat top left;position: absolute;top: -5.9vw;left: 22.2vw;background-size: 100% auto;}
#contents01 .textinBox::after{content: "";display: block;width: 8.53vw;height: 3.57vw;top: 0;background: #fff;left: 20vw;position: absolute;}
#contents01 .textinBox p.text {font-size: 3.73vw;line-height: 2.5;font-weight: 500;letter-spacing: 0.37vw;margin-bottom: 0.0vw;position: relative;text-align: center;}
#contents01 .inner-Box2{margin: 0 5vw;position: relative;background: url('../images/character/sp-contents01-back02.svg')no-repeat top center;padding: 6.43vw 0 18.2vw;background-size: 100% auto;}
#contents01 .inner-Box2 span.icon01 {display: block;line-height: 1;position: absolute;top: -11.4vw;left: -3vw;width: 24.4vw;}
#contents01 .inner-Box2 span.icon01 img {  }
#contents01 .inner-Box2 h3.f-en {font-size: 5.87vw;line-height: 1.75;font-weight: 700;letter-spacing: 0.59vw;margin-bottom: 2.83vw;position: relative;text-align: center;color: #1788A0;}
#contents01 .inner-Box2 ul.list {margin: 0 8vw;}
#contents01 .inner-Box2 ul li { position: relative; }
#contents01 .inner-Box2 ul li:nth-child(3n) { margin-right: 0.0vw; }
#contents01 .inner-Box2 p.ltext {font-size: 3.73vw;line-height: 1.5;font-weight: 400;letter-spacing: 0.0vw;margin-bottom: 3.77vw;position: relative;padding: 0 0 0 15.93vw;}
#contents01 .inner-Box2 p.ltext span {letter-spacing: 0;font-weight: bold;color: #1788A0;position: absolute;top: 0;left: 0;}
#contents01 .inner-Box2 span.icon02 {display: block;line-height: 1;position: absolute;bottom: 0vw;right: 0vw;width: 18.2vw;}
#contents01 .inner-Box2 span.icon02 img {  }
    
    .seo_bread_list{margin-bottom: -30.6vw;z-index: 5;color: #fff;top: -9vw;position: relative;}
    .seo_bread_list img{ -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
    .contentsformback{background: #1788A0;position: relative;z-index: 3;padding: 13.63vw 0 0.93vw;margin-bottom: 0vw;}
    .contentsformback::before{content: "";display: block;width: 100%;height: 10vw;background: url(../images/contact/contentsform-back.svg)no-repeat top center;position: absolute;top: -9vw;left: 0;background-size: 100% auto;}


 }