@charset "UTF-8";
/*
PNK #e12b4f
BLU #009fe8 #1075c1
GRN #0dac67 #208450
ORG #f29600
PUR　#910782
*/

.bgImg{
  display:none !important;
}
/*___________________________head*/
.headWrap{
  overflow:hidden;
  background:url(../img/head_bg-sp.jpg) no-repeat #65c7ff 50% 100%/contain;
}

.headWrap h1{
  padding:4vw 2vw 2vw;
  margin:0;
}
.headVoice{
  position:relative;
  list-style:none;
  height:90vw;
  padding:0;
  margin:0;
}
.headVoice li{
  position:absolute;
  width:50vw;
}
.headV01{
  bottom:35%;right:-2%;
  transform:rotate(-10deg);
}
.headV02{
  bottom:7%;right:2%;
  transform:rotate(-10deg);
}
.headV03{
  bottom:28%;left:-6%;
  transform:rotate(10deg);
}
.headV04{
  bottom:5%;left:-3%;
  transform:rotate(10deg);
}
.gNav{
  background-color:#e12b4f;
  padding:.3em .5em;
  text-align:center;
}
.gNav ul li{
  display:inline-block;
}
.gNav li a{
  display:block;
  padding:.2em 1em .2em 2em;
  background:url(../img/arrowB.svg) no-repeat .8em 50%/12px auto;
  color:#FFF;
  font-weight:bold;
}
.gNav li a:hover{
  background-position:.8em 60%;
}


@media screen and (min-width:600px){
  header{
    background-color:#F6EBD9;
  }
  .headWrap{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    max-width:1320px;
    height:calc(100vw*676/1320);
    max-height:676px;
    margin:0 auto;
    background:url(../img/head_bg-pc.jpg) no-repeat #F6EBD9 50% 50%/cover;
  }
  .headWrap h1{
    width:48.125%;
    padding:0;
  }
  .headVoice{
    width:51.875%;
    height:100%;
  }
  .headVoice li{
    width:38.855%;
  }
  .headV01{/*世界*/
    bottom:40%;right:34%;
    transform:rotate(-10deg);
  }
  .headV02{/*高齢者*/
    bottom:7%;right:2%;
  }
  .headV03{/*歌*/
    bottom:16.5%;right:30%;left:auto;
    transform:rotate(-10deg);
  }
  .headV04{/*バリアフリー*/
    bottom:31.5%;right:2%;left:auto;
    transform:rotate(-10deg);
  }
  .gNav{
    padding-top:0;
    padding-bottom:0;
  }
  .gNav li a{
    padding:.5em 2em .5em 3em;
    background-size:16px auto;
    background-position:1.8em 50%;
    font-size:1.25em;
  }
  .gNav li a:hover{
    background-color:#1075c1;
    background-position:1.8em 60%;
  }
}

/*___________________________base*/
main{
  background-color:#F6EBD8;
}
.inner{
  padding:min(8vw,88px) 4vw min(10vw,96px);
}
.inner h2{
  margin-bottom:.6em;
  text-align:center;
}
#boshu h2{
  margin:min(7vw,56px) 0 min(.5vw,.5em);
  color:#208450;
}
#boshu .btn a{
  width:9em;
  padding:.3em 2em;
  background:#208450;
  box-shadow:0 8px #1b6f43;
}
#tokuten h2{
  color:#910782;
}
#tokuten .btn a{
  background:#910782;
  box-shadow:0 8px #7A056D;
}
#yoko h2{
  color:#e12b4f;
}
#faq h2{
  color:#1075c1;
}
#faq .btn a{
  background:#1075c1;
  box-shadow:0 8px #0D62A2;
}
/*TB Over*/
@media screen and (min-width:768px){
  .inner{
    max-width:1100px;
    padding-left:40px;
    padding-right:40px;
    margin-left:auto;
    margin-right:auto;
  }
  #boshu .btn a{
    width:12em;
    min-width:0
  }
}
/*___________________________first{*/
#first{
  background-color:#FFF;
}
.firsLead{
  padding:min(5.5vw,64px) min(4vw,46px) 0;
  color:#e12b4f;
  font-size:min(4vw,1em);
  font-weight:bold;
  text-align:center;
  font-feature-settings:"palt";
}
.firsLead .fontL{
  font-size:min(5.3vw,1.313em);
}
.marker{
  background:linear-gradient(transparent 60%, #FFFF29 60%);
}
.firstAbout{
  padding:min(5.5vw,64px) 0/*4vw*/;
}
.firstA-txt{
  padding:4vw 4vw 8vw;
}
/* .firstA-txt h3{
  font-size:1.125em;
} */
/*TB Over*/
@media screen and (min-width:768px){
  .firsLead{
    font-size:1.25em;
    line-height:1.8;
  }
}
/*PC Over*/
@media screen and (min-width:1025px){
  .firstAbout{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    padding-bottom:0;
    margin-bottom:-11vw;
  }
  .firstA-img{
    width:60%;
  }
  .firstA-txt{
    width:40%;
    padding:40px;
    margin-top:4vw;
    background-color:#FFF;
  }
  .firstA-txt h3,.firstA-txt p{
    max-width:560px;
    margin-right:auto;
  }
}
/*___________________________boshu*/
#boshu{
  background:url(../img/theme_bg.png) repeat #FFF;
}
#boshu .inner{
  position:relative;
  padding:min(5.5vw,64px) 10px 0;
}
.boshBox{
  position:relative;
  z-index:1;
  padding:1px 2vw;
  max-width:510px;
  margin-left:auto;
  margin-right:auto;
  background:url(../img/theme_fukidashi.png) no-repeat 50% 50%/contain;
  text-align:center;
}
.boshBox p{
  margin-bottom:.5em;
}
.boshBox .btn{
  margin:min(2vw,1em) 0 min(8vw,56px);
}
.bosh-deco{
  max-width:680px;
  margin:0 auto;
  padding-right:min(2vw,16px);
  text-align:right;
}
.bosh-deco img{
  width:22vw;
  max-width:103px;
}
/*TB Over*/
@media screen and (min-width:768px){
  .bosh-deco{
    margin-top:-90px;
  }
}
/*PC Over*/
@media screen and (min-width:1025px){
  #boshu .inner{
    padding-top:calc(64px + 11vw);
  }
}
/*___________________________tokuten*/
#tokuten{
  background:url(../img/tokuten_bg.png) repeat #FFF;
}
.tokuBlock{
  margin-bottom:.5em;
}
.tokuBox{
  position:relative;
  max-width:494px;
  border-radius:10px;
  background-color:#fcf2e3;
  margin:3rem auto 0;
}
.tokuBox h3{
  position:absolute;
  top:-2rem;left:0;right:0;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  width:6rem;
  height:6rem;
  margin:0 auto 1em;
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:cover;
  text-align:center;
}
.tokuBox h3 span{
  display:block;
  width:100%;
  font-size:1.5em;
  line-height:1.2;
}
.toku01 h3{
  background-image:url(../img/tokuten_bg02.svg);
}
.toku02{
  padding-top:5rem;
}
.toku02 h3{
  background-image:url(../img/tokuten_bg03.svg);
}
.tokuB-deco{
  position:absolute;
  top:-2.5rem;left:4%;
}
.tokuB-deco img{
  width:min(35%,101px);
}
.tokuB-preImg{
  border-radius:10px 16px 0 0;
  overflow:hidden;
}
.tokuB-preImg p{
  padding:5px 1em 0;
  text-align:right;
  font-size:87.5%;
  line-height:1.3;
}
.tokuB-preTxt{
  padding:0 1em 1em;
}

/*SP Only*/
@media screen and (max-width:599px){
  .tokuBox h3{
    font-size:1em;
  }
}
/*TB Over*/
@media screen and (min-width:768px){
  .tokuLead{
    text-align:center;
  }
  .tokuBlock{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-bottom:16px;
  }
  .tokuBox{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    width:calc(50% - 16px);
    margin-top:calc(67px + 1em);
  }
  .tokuBox.toku02{
    padding-top:calc(67px + 1em);
  }
  .tokuBox h3{
    width:134px;
    height:134px;
    top:-67px;
  }
}
/*PC Over*/
@media screen and (min-width:1025px){
  .tokuBox{
    padding-top:calc(67px + 1em);
  }
  .tokuB-pre{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }
  .tokuB-preImg{
    width:calc(100% - 14em);
    order:1;
    border-radius:0;
    padding:0 1em 0;
  }
  .tokuB-preImg p{
    padding:5px 0 8px;
  }
  .toku01 .tokuB-preTxt{
    width:14em;
  }
  .tokuB-preTxt{
    text-align:center;
  }
  .tokuB-deco{
    top:-77px;left:32px;
  }
}


/*___________________________yoko*/
#yoko{
  background:url(../img/yoko_bg.jpg) repeat #FDF3F4;
}
#yoko .inner h3{
  color:#e12b4f;
  text-align:center;
}
.yokoBlock{
  background-color:#FFF;
  border-radius:10px;
  padding:0 1em 1em 1em;
  margin-bottom:min(5.5vw,64px);
}
.yokoBlock dl{
  margin-bottom:0;
}
.yokoBlock dt{
  padding:1em 0 .3em;
  color:#e12b4f;
  font-weight:bold;
}
.yokoSample{
  border-radius:10px;
  background-color:#fcf2e3;
  padding:16px;
  margin-top:1em;
}
.yokoSample h4{
  margin-bottom:.5em;
  font-size:1.125em;
}
.yokoKiyaku > li{
  margin-bottom:1em;
  font-weight:bold;
}
.yokoKiyaku > li:last-of-type{
  margin-bottom:0;
}
.yokoKiyaku > li li{
  font-weight:normal;
}
#yoko .btn{
  font-size:1.25em;
}
/*SP Only*/
@media screen and (max-width:599px){
  .yokoBlock dd:not(:last-child){
    padding-bottom:1em;
    border-bottom:1px dotted #808080;
  }
  .yokoSample-img{
    margin-bottom:10px;
  }
}
/*TB Over*/
@media screen and (min-width:768px){
  .yokoBlock{
    padding:8px 24px 24px 24px;
    border-radius:16px;
  }
  .yokoBlock dl{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .yokoBlock dt{
    width:6em;
    padding:1em 0;
    border-bottom:1px dotted #808080;
  }
  .yokoBlock dd{
    width:calc(100% - 6em - 1px);
    padding:1em 0;
    border-bottom:1px dotted #808080;
  }
  .yokoSample{
    display:flex;
    flex-wrap:wrap;
    padding:24px;
    border-radius:16px;
  }
  .yokoSample-img{
    width:50%;
  }
  .yokoSample-txt{
    width:50%;
    padding-left:24px;
  }
}
/*___________________________faq*/
#faq{
  background:url(../img/faq_bg.png) repeat #FFF;
}
.faqBlock{
  position:relative;
  z-index:0;
  padding-bottom:1px;
  margin-bottom:min(6vw,24px);
}
.faqBlock::before{
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  display:block;
  content:"";
  width:100%;
  height:100%;
  background-color:#FFF;
  border-radius:10px;
}
.faqBlock::after{
  position:absolute;
  z-index:-1;
  left:5px;
  top:8px;
  display:block;
  content:"";
  width:100%;
  height:100%;
  background-color:rgba(16,117,193,.2);
  border-radius:10px;
}
.faqBlock h3{
  position:relative;
  z-index:2;
  padding:.7em .5em;
  background-color:#1075c1;
  margin:0;
  border-radius:10px 10px 0 0;
  color:#FFF;
  text-align:center;
}
.faqBlock dl{
  position:relative;
  z-index:2;
  padding:1em;
  margin:0;
}
.faqBlock dt,.faqBlock dd{
  position:relative;
  padding-left:40px;
  min-height:30px;
}
.faqBlock dt{
  margin-bottom:.5em;
}
.faqBlock dd:not(:last-child){
  padding-bottom:1em;
  margin-bottom:1em;
  border-bottom:1px dotted #808080;
}
.faqBlock dt::before,.faqBlock dd:before{
  content:"";
  position:absolute;
  top:0;left:0;
  display:block;
  width:30px;
  height:30px;
  border-radius:30px;
}
.faqBlock dt::before{
  background-color:#e12b4f
}
.faqBlock dd:before{
  background-color:#1075c1
}
.faqBlock dt::after,.faqBlock dd::after{
  content:"";
  position:absolute;
  top:7px;left:7px;
  display:block;
  width:16px;
  height:16px;
  background-repeat:no-repeat;
}
.faqBlock dt::after{
  background-image:url(../img/faq_txtQ.svg);
}
.faqBlock dd::after{
  background-image:url(../img/faq_txtA.svg);
}
/*TB Over*/
@media screen and (min-width:768px){
  .faqBlock{
    display:flex;
    flex-wrap:wrap;
  }
  .faqBlock::before,.faqBlock::after{
    border-radius:16px;
  }
  .faqBlock::after{
    top:10px;left:10px;
  }
  .faqBlock h3{
    display:flex;
    justify-content:center;
    align-items:center;
    width:30%;
    border-radius:16px 0 0 16px;
  }
  .faqBlock dl{
    width:70%;
    padding:24px;
  }
}
/*PC Over*/
@media screen and (min-width:1025px){
  .faqBlock h3{
    width:20rem;
    border-radius:16px 0 0 16px;
  }
  .faqBlock dl{
    width:calc(100% - 20rem);
  }
}
/*___________________________contact*/
#contact{
  text-align:center;
}
.footPeople{
  position:sticky;
  bottom:0;
  z-index:999;
  height:min(18vw,106px);
  text-align:center;
  background:url(../img/foot.png) no-repeat 50% 100%/auto min(18vw,106px);
}
.footPeople img{
  height:min(18vw,106px);
  width:auto;
  max-width:none;
}
.goTop{
  position:absolute;
  top:-4.3em;right:2vw;
  display:flex;
  align-items:center;
  justify-content:center;
  width:5em;
  height:5em;
  border-radius:8em;
  background-color:#e12b4f;
  color:#FFF!important;
  font-size:85.7%;
  line-height:1.2;
  text-decoration:none;
  transition:all .1s ease;
}
.goTop::before{
  content:"";
  position:absolute;
  bottom:-20px;left:50%;
  z-index:-1;
  margin-left:-10px;
  border:10px solid transparent;
  border-top:20px solid #e12b4f;
}
.goTop:hover{
  background-color:#1075c1;
  transform:translateY(-8px);
}
.goTop:hover::before{
  border-top:20px solid #1075c1;
}
/*TB Over*/
@media screen and (min-width:768px){
  .footPeople{
    max-width:868px;
    margin:-72px auto 0;
  }
  .goTop{
    top:-5.5em;right:0;
  }
}
/*___________________________footer*/
.footNav{
  padding:.5em 4vw;
  background-color:#0e5fa6;
  text-align:right;
}
.footNav li a{
  background:url(../img/fnavi_icon.png) no-repeat left center;
  color:#FFF;
}
.footNav li a:hover{
  text-decoration:underline;
}

.footAdd{
}
.footA-logo{
  width:110px;
}
.footA-logo a:hover{
  opacity:.7;
}
address{
  font-style:normal;
}
address span{
  display:inline-block;
}
.copyright{
  padding:2px;
  background-color:#333333;
  color:#FFF;
  text-align:center;
}

/*SP Only*/
@media screen and (max-width:599px){
  footer{
    font-size:85.7%;
  }
  .footNav li a{
    padding-left:18px;
    background-size:12px auto;
  }
  address{
    border-top:1px solid #c9c9c9;
    padding:.5em 4vw;
  }
}
/*TB Over*/
@media screen and (min-width:768px){
  .footNav ul{
    width:1020px;
    margin:0 auto;
  }
  .footNav li a{
    padding-left:27px;
  }
  .footAdd{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    width:1020px;
    margin:0 auto;
  }
  .footA-logo{
    width:185px;
    height:85px;
  }
  .footA-info{
    width:calc(100% - 185px);
    text-align:right;
  }
  .copyright{
    font-size:85.7%;
  }
}



/*___________________アニメーション*/
html{scroll-behavior:smooth;}
.fadeInUp,.fadeIn,.headWrap h1,.headVoice li{opacity:0;}
.headWrap h1{animation:poyoyon2 .8s ease-in-out .5s forwards;}
.fadeInUp.is-active{animation:fadeInUp .8s ease .5s 1 forwards;}
.fadeIn.is-active{animation:fadeIn .8s ease .5s 1 forwards;}
.headVoice li{animation:fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;}
.headV01{animation-delay:2s!important;}
.headV02{animation-delay:2.6s!important;}
.headV03{animation-delay:2.4s!important;}
.headV04{animation-delay:2.8s!important;}
.headVoice li img{animation:voicePoyo 8s ease-out forwards infinite;}
.headV01 img{ animation-delay:2s!important; }
.headV02 img{ animation-delay:2.6s!important;}
.headV03 img{ animation-delay:2.4s!important;}
.headV04 img{ animation-delay:2.8s!important;}
@keyframes poyoyon2{
  15%{transform:scale(0.98, 0.9) translate(0, 5px);opacity:1;}
  30%{transform:scale(1.02, 1.0) translate(0, 8px);}
  50%{transform:scale(0.98, 1.05) translate(0, -8px);}
  70%{transform:scale(1.0, 0.9) translate(0, 5px);}
  100%{transform:scale(1.0, 1.0) translate(0, 0);opacity:1;}
}
@keyframes zoomIn{
  0%{transform:scale(0.8);opacity:0;}
  100%{opacity:1;transform:scale(1);}
}
@keyframes fadeInUp{
  0%,60%,75%,90%,100%{animation-timing-function:cubic-bezier(0.215,.61,0.355,1)}
  10%{opacity:0;transform:translate3d(0, 10vh, 0)}
  60%{opacity:1;transform:translate3d(0, -4px, 0)}
  75%{transform:translate3d(0, 4px, 0)}
  90%{transform:translate3d(0, -1px, 0)}
  100%{transform:translateZ(0);opacity:1;}
}
@keyframes fadeIn{
  0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes voicePoyo{0%{transform:scale(.5) translateY(10px);}
  2%{transform:scale(.95) translateY(-2px);}
  4%{transform:scale(.75) translateY(1px);}
  6%{transform:scale(1) translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .fadeInUp,.fadeIn,.fadeInUp.is-active,.fadeIn.is-active,.headWrap h1,.headVoice li,.headVoice li img{
    animation:none;opacity:1;
  }
  html{
    scroll-behavior:auto;
  }
}