@charset "utf-8";
/* ===============================================
# wrapper
=============================================== */
body{
  background: url("/lp/voice/img/img_deco_top.svg")no-repeat top center;
  background-color: #fcf256;  
  background-size: 1038px auto;
}
.wrapper{
  margin: 0 auto;
  color: #3541b5;
  background: url("/lp/voice/img/img_deco_left.svg")repeat-y left top,
    url("/lp/voice/img/img_deco_right.svg")repeat-y right top;
  
}
@media print,screen and (max-width :1920px){
  body{
    background-size: 53.6% auto;
  }   
  .wrapper{
    background-size: 8.28% auto,10.93% auto;
  }    
}
@media screen and (max-width :834px){
  body{
    background-image: url("/lp/voice/img/img_deco_top_sp.svg");
    background-size: 100% auto;
  }
  .wrapper{
    background: url("/lp/voice/img/img_deco_left_sp.svg")repeat-y left top,
      url("/lp/voice/img/img_deco_right_sp.svg")repeat-y right top;
    background-size: 28.1% auto,29.2% auto;
  }
}
/* ===============================================
# header
=============================================== */
#header{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 2.6% 0 0 2.34%;
  z-index: 100;
}
#header h1 img{
  width: 171px;  
}
@media screen and (max-width :834px){
  #header{
    padding: 3.8% 0 0 4%;
  }
  #header h1 img{
    width: 21.33%;
    min-width: 80px;  
  }
}
/* ===============================================
# area_first
=============================================== */
.area_first{
  position: relative;
  height: 100vh;
  padding-top: 13.4vh;
  display: -webkit-box;
  display: -ms-flex;  
  display: -webkit-flex;
  display: flex;  
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;   
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;  
  overflow: hidden;
}
@media print,screen and (max-height:800px) and (min-width :835px){
  .area_first{
    height: auto;
  }
}
@media print,screen and (max-width:1200px) and (min-width :835px){
  .area_first{
    height: auto
  }
}
.area_first .inner{
  width: 100%;
  max-width: 1430px;
  padding: 0 20px;
  -webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
  flex-wrap: wrap;
}
@media screen and (max-width :834px){
  .area_first{
    height: auto;
    padding-top: 7.2vw;
  }  
  .area_first .inner{
    width: 92%;
    padding: 0;
  }
}
/*box_ttl*/
.area_first .box_ttl{
  width: 46.54%;
  text-align: center;
  opacity: 0;
  -webkit-animation: fadeInUp 0.7s ease 0s forwards;
  animation: fadeInUp 0.7s ease 0s forwards;
}
.area_first .box_ttl h1{
  width: 92%;
  max-width: 574px;
  margin: 0 auto 25px;
}
.area_first .box_ttl .txt_lead{
  font-size: 21.4px;
  font-size: 2.14rem;
  font-weight: bold;
  line-height: 1.944;
  
}
.area_first .box_ttl .txt_lead span{
  border-bottom: solid 3px #3541b5;
}
@media print,screen and (max-width :1080px){
  .area_first .box_ttl .txt_lead{
    font-size: 1.944vw;
  }    
}
@media screen and (max-width :834px){
  .area_first .box_ttl{
    width: 100%;
    margin-bottom: 25px;
    text-align: center;    
  }
  .area_first .box_ttl h1{
    width: 100%;
    max-width: inherit;
    margin: 0 auto 7px;
  }
  .area_first .box_ttl .txt_lead{
    font-size: 13px;
    font-size: 3.467vw;
    line-height: 1.43;

  }
  .area_first .box_ttl .txt_lead span{
    border-width: 1.5px;
  }  
}
/*box_movie*/
.area_first .box_movie{
  -webkit-box-flex: 1;
  flex: 1;
  opacity: 0;
  -webkit-animation: fadeIn 1s ease 0.7s forwards;
  animation: fadeIn 1s ease 0.7s forwards;
  
}
.area_first .box_movie figure{
  position: relative;
  width: 92%;
  max-width: 664px;
  margin: 0 auto;
  background: #fff;
  padding: 7px;
}
.area_first .box_movie figure a{
  position: relative;
  display: block;
}
.area_first .box_movie figure a::after{
  content: '';
  width: 96px;
  height: 96px;
  background: url("/lp/voice/img/ico_play.svg")no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);  
  transform: translate(-50%,-50%);
}
.area_first .box_movie figure figcaption{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 197px;
  -webkit-transform: translateY(-60%);
  transform: translateY(-60%);
  z-index: 3;
}
.area_first .box_movie figure img{
  width: 100%;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
@media screen and (min-width :768px) and (hover:hover){
  .area_first .box_movie figure a:hover > img{
    opacity: 0.6;
  }
}
@media screen and (max-width :834px){
  .area_first .box_movie figure{
    width: 89.7%;
    max-width: inherit;
    padding:4px;
  }
  .area_first .box_movie figure a::after{
    width: 45px;
    height: 45px;
  }
  .area_first .box_movie figure figcaption{
    width: 36.8%;
    left: 0;
    margin: 0;
    -webkit-transform: translate(-10%,-1.6%);
    transform: translateY(-10%,-1.6%);
  }
}

/*box_people*/
.area_first .box_people{
  width: 100%;
  max-width: 1440px;
  margin: 30px auto 0;
  position: relative;
  text-align: center;
  -webkit-box-flex: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  -webkit-animation: fadeInUp 0.7s ease 1.7s forwards;
  animation: fadeInUp 0.7s ease 1.7s forwards;  
}

@media screen and (max-width :834px){
  .area_first .box_people{
    width: 90%;
    margin-top: 20px;
    animation-delay: 2.1s;
  }
}
/*scroll*/
.area_first .scroll{
  width: 137px;
  position: absolute;
  right: 3.95%;
  bottom: 50px;
  z-index: 900;
  opacity: 0;
  -webkit-animation: fadeInDown 1s ease 2.8s forwards;
  animation: fadeInDown 1s ease 2.8s forwards;    
}

@media print,screen and (max-width :1740px){
  .area_first .scroll{
    width: 9%;
  }
  .area_first .scroll img{
    width: 83%;
  }
}
@media screen and (max-width :834px){
  .area_first .scroll{
    position: relative;
    width: 17%;
    min-width:64px;
    right: 0;
    bottom: 0;
    margin: 19px auto 0;
    animation-delay: 1.4s;
  }
  .area_first .scroll img{
    width: 100%;
  }  
}

/* ===============================================
# sec_voice
=============================================== */
.sec_voice{
  padding: 70px 20px 0;
}
.sec_voice h2{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  
  font-family: 'Kiwi Maru', serif;
  font-weight: 500;
  font-size: 35px;
  font-size: 3.5rem;
  width: 90%;
  max-width: 1400px;
  height: 141px;
  margin: 0 auto;
  padding: 5px 40px 5px 60px;
  line-height: 1.3;
  background-size: auto auto;
  background-color: rgba(255, 255, 255, 1);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(167, 212, 241, 1) 2px, rgba(167, 212, 241, 1) 6px);
  overflow: hidden;
}
.sec_voice h2.pink{
  background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(255, 211, 241, 1) 2px, rgba(255, 211, 241, 1) 6px);
}

.sec_voice h2::before,.sec_voice h2::after{
  content:"";
  display: block;
  position: absolute;
  top: 0;
  width: 36px;
  height: 100%;
  background: url("/lp/voice/img/img_ribon_side.svg")no-repeat center right;
  background-size: auto 100%;
}
.sec_voice h2::before{
  left: -18px;
  background-position: center left;
}
.sec_voice h2::after{
  right: -18px;
  background-position: left center;
}
.sec_voice h2 img{
  width: 71px;
  margin-right: 33px;
}
.sec_voice .area_list{
  position: relative;
  padding: 115px 0 100px;
  background: #fff;
  border-radius: 51px;
  max-width: 1500px;
  margin: 0 auto 0;
  box-shadow: 16px 7px 0px 0px rgba(53, 65, 181, 1);
}
.sec_voice .area_list:nth-of-type(n+2){
  margin-top: 190px;
}
.sec_voice .area_list ul{
  width: 96%;
  max-width: 1400px;
  margin: 0 auto;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;  
  flex-wrap: wrap;
}
.sec_voice .area_list ul::after{
  content: '';
  width: 29.42%;
  display: block;
}
.sec_voice .area_list ul li{
  width: 29.42%;
}
.sec_voice .area_list ul li:nth-child(n+4){
  margin-top: 46px;
}
.sec_voice .area_list ul li .name{
  text-align: center;
  margin-bottom: 8px;
}
.sec_voice .area_list ul li .name span{
  display: inline-block;
  font-family: 'Kiwi Maru', serif;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: 500;
  padding: 0 40px;
  background: url("/lp/voice/img/ico_name_deco_l.svg")no-repeat center left,
    url("/lp/voice/img/ico_name_deco_r.svg")no-repeat center right 0;
}
.sec_voice .area_list ul li figure{
  text-align: center;
}
.sec_voice .area_list ul li figure img{
  width: 181px;
}
.sec_voice .area_list ul li .box_txt{
  position: relative;
  border: solid 3px #a7d4f1;
  border-radius: 20px;
  padding: 20px 10px;
  margin-top: 15px;
  line-height: 1.647;
}
.sec_voice .area_list ul li.pink .box_txt{
  border-color: #ffd4f1;
}
.sec_voice .area_list ul li .box_txt:before {
  content: "";
  position: absolute;
  top:1px;
  left: 50%;
  width: 41px;
  height: 34px;
  background-image: url("/lp/voice/img/ico_triangle_b.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  -webki-transform: translate(-50%,-100%);
  transform: translate(-50%,-100%);
}
.sec_voice .area_list ul li.pink .box_txt:before {
  background-image:url("/lp/voice/img/ico_triangle_p.svg");
}
.sec_voice .area_list ul li .box_txt p{
  margin: 0 auto;
  max-width: 340px;
  font-weight: bold;
  font-size: 17px;
  font-size: 1.7rem;
}
@media print,screen and (max-width :1080px){
  .sec_voice h2{
    font-size: 3.241vw;
  }    
}
@media print,screen and (max-width :1024px){
  .sec_voice .area_list ul li{
    width: 48%;
  }  
  .sec_voice .area_list ul li:nth-child(n+3){
    margin-top: 46px;
  }    
}
@media screen and (max-width :834px){
  .sec_voice{
    padding: 35px 4.5% 0;
  }
  .sec_voice h2{
    font-size: 17px;
    font-size: 1.7rem;
    width: 94%;
    height: 70px;
    padding: 5px 14px;
    line-height: 1.188;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 1px, rgba(167, 212, 241, 1) 2px, rgba(167, 212, 241, 1) 4px );
  }
  .sec_voice h2.pink{
    background-image: repeating-linear-gradient(135deg, transparent, transparent 1px, rgb(255, 211, 241) 2px, rgb(255, 211, 241) 4px );
  }
  .sec_voice h2::before,.sec_voice h2::after{
    top: 0;
    width: 8px;
    background-image: url("/lp/voice/img/img_ribon_side_sp.svg");
  }
  .sec_voice h2::before{
    left: -4px;
  }
  .sec_voice h2::after{
    right: -4px;
    background-position: left center;
  }
  .sec_voice h2 img{
    width: 36px;
    margin-right: 13px;
  }
  .sec_voice .area_list{
    padding: 67px 0 36px;
    border-radius: 15px;
    box-shadow: 6px 6px 0px 0px rgba(53, 65, 181, 1);
  }
  .sec_voice .area_list:nth-of-type(n+2){
    margin-top:70px;
  }
  .sec_voice .area_list ul{
    width: 98%;
  }
  .sec_voice .area_list ul::after{
    display: none;
  }
  .sec_voice .area_list ul li{
    width: 100%;
 	  display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;    
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  
  }
  .sec_voice .area_list ul li:nth-child(n+2){
    margin-top: 15px;
  }
  .sec_voice .area_list ul li .box_name{
    width: 140px;
 	  display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
 	  -webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;    
  }
  .sec_voice .area_list ul li .name{
    -webkit-box-ordinal-group:2;
    order: 1;
    margin: 8px 0 0;
  }
  .sec_voice .area_list ul li .name span{
    font-size: 12px;
    font-size: 1.2rem;
    padding: 0 13.5px;
    background-size: 11px auto,11px auto;
  }
  .sec_voice .area_list ul li figure{
    -webkit-box-ordinal-group:1;
    order: 0;    
  }
  .sec_voice .area_list ul li figure img{
    width: 94px;
  }
  .sec_voice .area_list ul li .box_txt{
    -webkit-box-flex: 1;
    flex: 1;
    border-width: 1.5px;
    border-radius: 10px;
    padding: 12px 13px;
    min-height: 94px;
    margin: 0 2.4% 0 0;
    line-height: 1.636;
  }
  .sec_voice .area_list ul li .box_txt:before {
    top:30px;
    left: -12.5px;
    width: 14px;
    height: 14px;
    -webkit-transform: translate(0,0) rotate(-90deg);
    transform: translate(0,0) rotate(-90deg);
    background-position: right center;
  }
  .sec_voice .area_list ul li .box_txt p{
    max-width: inherit;
    font-size: 11px;
    font-size: 1.1rem;
  }  
  
  .android .sec_voice h2{
    background: #A7D4F1;
  }
  .android .sec_voice h2.pink{
    background: #FFD3F1;
  }

}
/* ===============================================
# sec_link
=============================================== */
.sec_link{
  padding: 95px 0 0;
}
.sec_link .inner{
  padding: 0 20px;
}
.sec_link .inner p{
  font-size: 26.2px;
  font-size: 2.62rem;
  font-weight: bold;
  line-height: 1.944;
  text-align: center;
  margin-bottom: 45px;
}
.sec_link .inner .txt_lead span{
  border-bottom: solid 3px #3541b5;
}
.sec_link ul{
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
  flex-wrap: wrap;
}
.sec_link ul li{
  width: 48%;
  max-width: 624px;
}
.sec_link ul li:nth-child(n+3){
  margin-top: 40px;
}
.sec_link ul li a{
  display: flex;
  align-items: center;
  min-height: 100px;
  font-family: 'Kiwi Maru', serif;
  font-size: 27px;
  font-size: 2.7rem;
  color: #3541b5;
  line-height: 1.333;
  background-color: #ffffff;
  border-radius: 10px;
  height: 100%;
  text-align: center;
}
/*.sec_link ul li:nth-child(even) a{
  background-color: #ffd4f1;
}*/
.sec_link ul li a:hover{
  color: #ffffff;
  background-color: #3541b5;
}
/*.sec_link ul li:nth-child(even) a:hover{
  background-color: #FDE0F4;
}*/
.sec_link ul li a span{
  display: block;
  width: 90%;
  max-width: 456px;
  padding: 10px 30px;  
  margin: 0 auto;
  background:url("/lp/voice/img/ico_arrow.svg")no-repeat right center;
  background-size: 21px auto;  
}
@media screen and (max-width :834px){
  .sec_link{
    padding: 40px 0 0;
  }
  .sec_link .inner{
    width: 92%;
    padding: 0;
  }
.sec_link .inner p{
  font-size: 21.4px;
  font-size: 2.14rem;
  margin-bottom: 25px;
}
  .sec_link ul{
  }
  .sec_link ul li{
    width: 100%;
    max-width: inherit;
  }
  .sec_link ul li:nth-child(n+2){
    margin-top: 13px !important;
  }
  .sec_link ul li a{
    min-height: 78px;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.321;
    border-radius: 5px;
  }
  .sec_link ul li a span{
    width: 89.8%;
    max-width: inherit;
    padding: 10px 20px;  
    background-size: 12px auto;  
  }  
}
/* ===============================================
# footer
=============================================== */
#footer{
  padding: 10px 0 70px;
}
#footer .copy{
  text-align: center;
  font-size: 15px;
  font-size: 1.5rem;
  font-family: 'Roboto', sans-serif;
}
@media screen and (max-width :834px){
  #footer{
    padding: 5px 0 45px;
  }
  #footer .copy{
    font-size: 10px;
    font-size: 1rem;
  }  
}

/* ===============================================
# animation
=============================================== */
.js_fade{
  opacity: 0;
}
.js_fade.show{
  opacity: 0;
  -webkit-animation: fadeInUp 0.7s ease 0s forwards;
  animation: fadeInUp 0.7s ease 0s forwards;  
}

.android .js_fade{
  opacity: 1;
}
@media all and (-ms-high-contrast:none) {
  .js_fade{
    opacity: 1;
  }
}
@media print{
  .js_fade{
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
 0% {
  opacity:0;
  -webkit-transform:translate3d(0,50px,0);
  transform:translate3d(0,50px,0)
 }
 to {
  opacity:1;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
 }
}
@keyframes fadeInUp {
 0% {
  opacity:0;
  -webkit-transform:translate3d(0,50px,0);
  transform:translate3d(0,50px,0)
 }
 to {
  opacity:1;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
 }
}
@-webkit-keyframes fadeIn {
 0% {
  opacity:0
 }
 to {
  opacity:1
 }
}
@keyframes fadeIn {
 0% {
  opacity:0
 }
 to {
  opacity:1
 }
}
@-webkit-keyframes fadeInDown {
 0% {
  opacity:0;
  -webkit-transform:translate3d(0,-20px,0);
  transform:translate3d(0,-20px,0)
 }
 to {
  opacity:1;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
 }
}
@keyframes fadeInDown {
 0% {
  opacity:0;
  -webkit-transform:translate3d(0,-20px,0);
  transform:translate3d(0,-20px,0)
 }
 to {
  opacity:1;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
 }
}