@charset "UTF-8";
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
}
main {
  width: 100%;

}

main img {
  display: block;
  width: 100%;
  vertical-align: baseline;
  line-height: 0;
  font-size: 0;
}

#lp_wrap div, #lp_wrap span, #lp_wrap iframe, #lp_wrap h1, #lp_wrap h2, #lp_wrap h3, #lp_wrap h4, #lp_wrap h5, #lp_wrap h6, #lp_wrap p, #lp_wrap address, #lp_wrap img, #lp_wrap small, #lp_wrap strong, #lp_wrap sub, #lp_wrap sup, #lp_wrap dl,
#lp_wrap dt, #lp_wrap dd, #lp_wrap ol, #lp_wrap ul, #lp_wrap form, #lp_wrap label, #lp_wrap table, #lp_wrap caption, #lp_wrap tbody, #lp_wrap tfoot, #lp_wrap thead, #lp_wrap tr, #lp_wrap th, #lp_wrap td, #lp_wrap article,
#lp_wrap aside, #lp_wrap footer, #lp_wrap header, #lp_wrap menu, #lp_wrap nav, #lp_wrap section, #lp_wrap video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 0;
  line-height: 0;
  vertical-align: baseline;
}
#lp_wrap article, #lp_wrap aside, #lp_wrap details, #lp_wrap figcaption, #lp_wrap figure,
#lp_wrap footer, #lp_wrap header, #lp_wrap menu, #lp_wrap nav, #lp_wrap section {
  display: block;
}
#lp_wrap ol, #lp_wrap ul {
  list-style: none;
}
#lp_wrap :focus {
  outline: 0;
}
#lp_wrap table {
  border-collapse: collapse;
  border-spacing: 0;
}
#lp_wrap *,
#lp_wrap *::before,
#lp_wrap *::after {
  box-sizing: border-box;
}
#lp_wrap img,
#lp_wrap video,
#lp_wrap svg {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


/* ---------------------------------------------
  フォーム調整
--------------------------------------------- */
#lp-form {
  position: relative;
  z-index: 10;
  background-color: #fff;
}
.form_container_ec {
  width: 600px !important;
}
.login_message_box_ec {
  max-width: 580px !important;
}
table.landing_form_ec {
  max-width: 580px !important;
}
.landing_form_ec td {
  max-width: 400px;
}



/* ---------------------------------------------
  common
--------------------------------------------- */
/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

#lp_wrap {
  overflow-x: hidden;
}

/* positionで配置したい要素の外側に使用 */
#lp_wrap .p_box {
  position: relative;
}

/* ---------------------------------------------
  loading
--------------------------------------------- */
.no-scroll {
  overflow: hidden;
}
.loading-area {
  width: 100%;
  height: 100vh;
  background-color: #898d9c;
  position: fixed;
  z-index:10;
}
.loading-area img {
  width: 100%;
}
.loading-area .load01,
.loading-area .load02 {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  position: fixed;
}
.loading-area .loading-anime01{
  width: 253px;

}
.loading-area .loading-anime02{
  width: 446px;
}
@media (max-width:750px){
  .loading-area .loading-anime01{
    width: calc(253/750*100%);
  }
  .loading-area .loading-anime02{
    width: calc(446/750*100%);
  }
}

/* ---------------------------------------------
  #pcArea
--------------------------------------------- */
#lp_wrap #pcArea {
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 1;
  background-image: url(../img/bg-pc.png);
  background-size: cover;
  background-position: left top;
}

@media (max-width:1000px) {
  #lp_wrap #pcArea .pc_left, 
  #lp_wrap #pcArea .pc_right {
    display: none!important;
  }
}

/* pc_left */
#lp_wrap .pc_left {
  width: 456px;
  margin-left: 5%;

}
#lp_wrap .pcLeft_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100vh;
}
#lp_wrap .pcRight_logo {
  width: calc(224/584*100%);
  margin: 0 auto 50px;
}
#lp_wrap .pcRight_cv {
  margin-bottom: 10px;
}
#lp_wrap .pcRight_btn {
  margin-bottom: 40px;
}


/* pc_right */
#lp_wrap #pcArea .pc_right {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 584px;
  margin-right: 2%;
}

#lp_wrap #pcArea .pc_right .pcRight_inner {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-end;
}
#lp_wrap #pcArea .pc_right .pcRight_inner .pcRight_logo {
}
#lp_wrap #pcArea .pc_right .pcRight_inner .pcRight_cv {
}
#lp_wrap #pcArea .pc_right .pcRight_inner .pcRight_btn {
}

@media (max-width:1250px) {
  #lp_wrap .pc_right {
    width: 15%;
    margin-right: 3%;
  }
}

/* pc_left Navi */
#lp_wrap .pcLeft_nav {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#lp_wrap .pcRight_nav .nav_item {
  display: inline-block;
}
#lp_wrap .pcRight_nav .nav_item:not(:last-of-type) {
  margin-bottom: 50px;
}
#lp_wrap .pcRight_nav .nav_item a {
  position: relative;
  transition: all ease 0.2s;
  text-decoration: none;
}

#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav {
}
#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav .nav_item:not(:last-of-type) {
  margin-bottom: 7%;

}
#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav .nav-01 {
  width: calc(130/456*100%);
}
#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav .nav-02 {
  width: calc(250/456*100%);
}
#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav .nav-03 {
  width: calc(255/456*100%);
}
#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav .nav-04 {
  width: 100%;
}
#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav .nav-05 {
  width: calc(378/456*100%);
}
#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav .nav-06 {
  width: calc(244/456*100%);
}
#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav .nav-07 {
  width: calc(110/456*100%);
}
#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav .nav_item img {
  transition: all ease 0.2s;
  filter:brightness(0.5);
}
#lp_wrap #pcArea .pc_left .pcLeft_inner #js_navList.pcLeft_nav .nav_item.current img {
 filter: brightness(1);
}



@media (max-width:1910px) {
  #lp_wrap .pc_left {
    width: 23%;
    margin-left: 3%;
  }
  #lp_wrap #pcArea .pc_left .pcLeft_inner .pcLeft_nav {
  }
  #lp_wrap #pcArea .pc_right {
    width: 28%;
  }
  #lp_wrap .pcRight_cv {
    margin-bottom: 5%;
  }
}
@media (max-width:1600px) {
  #lp_wrap .pc_left {
    width: 23%;
    margin-left: 3%;
  }
  #lp_wrap #pcArea .pc_left .pcLeft_inner .pcLeft_nav {
  }
  #lp_wrap #pcArea .pc_right {
    width: 24%;
  }
  #lp_wrap .pcRight_btn {
    margin-bottom: 20%;
  }
}

@media (max-width:1350px) {
  #lp_wrap .pc_left {
    width: 20%;
    margin-left: 3%;
  }
  #lp_wrap #pcArea .pc_left .pcLeft_inner .pcLeft_nav {
  }
  #lp_wrap #pcArea .pc_right {
    width: 20%;
  }
  #lp_wrap .pcRight_btn {
    margin-bottom: 30%;
  }
}

@media (max-width:1200px) {
  #lp_wrap .pc_left {
    width: 15%;
    margin-left: 3%;
  }
  #lp_wrap #pcArea .pc_left .pcLeft_inner .pcLeft_nav {
  }
  #lp_wrap #pcArea .pc_right {
    width: 17%;
  }
}


@media (max-height:750px) {
  #lp_wrap #pcArea .pc_right {
    width: 20%;
  }
  #lp_wrap .pcRight_logo {
    margin-bottom: 5%;
  }
  #lp_wrap .pcRight_btn {
    margin-bottom: 5%;
  }
}
@media (max-height:550px) {
  #lp_wrap #pcArea .pc_right {
    width: 15%;
  }
}

@media (max-height:450px) {
  #lp_wrap #pcArea .pc_right ,
  #lp_wrap #pcArea .pc_left {
    display: none;
  }
}




/* ---------------------------------------------
  main
--------------------------------------------- */
#lp_wrap main {
  position: relative;
  width: min(100%, 600px);
  margin: 0 auto;
  z-index: 5;
  background-color: #FFF;
}
@media (max-width:1000px) {

}
@media (max-width:750px) {
  #lp_wrap main {
    width: 100%!important;
  }
}


/*============================
#lp_wrap
============================*/
#lp_wrap {
}

/*============================
#pcArea
============================*/
#lp_wrap #pcArea {
}
#lp_wrap #pcArea .pc_left {
}
#lp_wrap #pcArea .pc_left .pcLeft_inner {
}




/*============================
header
============================*/
#lp_wrap header {
  background-color: #9fa8b9;
  padding:calc(15/750*100%) 0 calc(10/750*100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
#lp_wrap .header-logo {
  width: calc(62/750*100%);
  margin-right: calc(45/750*100%);
}
#lp_wrap  .header-text {
  font-size: min(calc(35/750*100vw),30px);
  color: #FFF;
  display: inline;
  font-weight: 600;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  letter-spacing: min(calc(1/750*100vw),1px);
}
#lp_wrap  .header-text .header-large {
  font-size: min(calc(45/750*100vw),38px);
  padding-right: 0.2em;
}
#lp_wrap   .header-text .header-large #counter {
  font-size: min(calc(45/750*100vw),38px);
  width: 5ch;
  display: inline-block;
  text-align: right;
}
#lp_wrap  .header-text sup {
  font-size: min(calc(12/750*100vw),10px);
  line-height: 1;
  vertical-align: bottom;
  font-weight: 400;
  padding-right: 0.2em;
}

#lp_wrap .abs-anime {
  position: absolute;
}

#lp_wrap .p-box {
  position: relative;
}

/*============================
#counter
============================*/
#lp_wrap   .header-text .header-large #counter {
}

/*============================
#fv
============================*/


#lp_wrap  #fv {
}

#lp_wrap  #fv .p-box .fv-anime01.abs-anime {
  width: calc(395/750*100%);
  top:12%;
  right:4%;
}
#lp_wrap  #fv .p-box .fv-anime02.abs-anime {
  width: calc(309/750*100%);
  top: 42%;
  left: 2%;
}

#lp_wrap  #fv .fv-icon {
  position: absolute;
  width: calc(186/750*100%);
  top: 50%;
  right: 4%;
  display: none;
}

@media (max-width:750px) {
  #lp_wrap  #fv .fv-icon {
    display: block;
  } 
}

/*============================
.offer
============================*/
#lp_wrap .offer {
}
#lp_wrap .offer .p-box {
}
#lp_wrap .offer .p-box .offer-num {
  width: calc(76/750*100%);
  left: 51%;
  top: 1%;
}
#lp_wrap .offer .p-box .btn-offer {
  position: absolute;
  width: calc(636/750*100%);
  top: 18%;
  left:calc(67/750*100%);
}
#lp_wrap .offer.bottom-offer .p-box .btn-offer {
  top:14%;
}


/*============================
#flavor
============================*/
#lp_wrap  #flavor {
}
#lp_wrap  #flavor .p-box {
}
#lp_wrap  #flavor .p-box .flavor-anime01 {
  width: calc(503/750*100%);
  top:66%;
  left:calc(123.5/750*100%);
}
#lp_wrap  #flavor {
}
#lp_wrap  #flavor .flavor-inner {
  background-color: #eeeeee;
  padding:10% 0 0;
}
#lp_wrap  #flavor .flavor-inner h3 {
  width: calc(690/750*100%);
  margin: 0 auto;
}
#lp_wrap  #flavor .flavor-inner h3 + h3 {
  margin-top: 5%;
}

/*============================
#sns
============================*/
#lp_wrap  #sns {
}

#lp_wrap  #sns .sns-anime01 {
  width: calc(497/750*100%);
  top:46%;
  left:calc(126/750*100%);
}
#lp_wrap  #sns .sns-anime02 {
  width: calc(239/750*100%);
  top:70%;
  left:16%;
}
#lp_wrap  #sns .sns-anime03 {
  width: calc(245/750*100%);
  top:70%;
  left:50%;
}
#lp_wrap  #sns .sns-anime04 {
  width: calc(348/750*100%);
  top:81.5%;
  left:27%;
}

#lp_wrap #sns .slide-wrap {
  background-color: #E2E7EB;
}
#lp_wrap #sns .slide-wrap .sns-slider {
  width: calc(625/750*100%);
  margin: 0 auto;
}
#lp_wrap #sns .slide-wrap .sns-slider .slide-arrow {
  position: absolute;
  top:45%;
  background-size: contain;
  width: calc(34/625*100%);
  padding-top: calc(85/625*100%);
  z-index:2;
  cursor: pointer;
  background-repeat: no-repeat;
}
#lp_wrap #sns .slide-wrap .sns-slider .slide-arrow.next-arrow {
  background-image: url(../img/slide-next.png);
  right: -4%;
}
#lp_wrap #sns .slide-wrap .sns-slider .slide-arrow.prev-arrow {
  background-image: url(../img/slide-prev.png);
  left:-4%;
}



/*============================
#media
============================*/
#lp_wrap  #media {
  background-image: url(../img/media-bg.jpg);
  background-size: cover;
  padding-bottom: calc(98/750*100%);
}
#lp_wrap  #media .media-anime01{
  width: calc(632/750*100%);
  margin: 0 auto 5%;
}
#lp_wrap  #media .media-anime02{
  width: calc(632/750*100%);
  margin: 0 auto 7%;
}
#lp_wrap  #media .media-anime03{
  width: calc(632/750*100%);
  margin: 0 auto;
}

/*============================
#ourbrand
============================*/

#lp_wrap  #ourbrand {

}
#lp_wrap  #ourbrand .ourabrand-anime01 {
  width: calc(427/750*100%);
  top:43%;
  left:calc(161/750*100%);
}
#lp_wrap  #ourbrand .ourabrand-anime01-1 {
  width: calc(382/750*100%);
  top:65%;
  left:calc(184/750*100%);
}



#lp_wrap  #ourbrand .ourbrand-anime02 {
  width: calc(663/750*100%);
  top:20%;
  left:calc(43.5/750*100%);
}

/*============================
#message
============================*/
#lp_wrap  #message {
  background-image: url(../img/message-bg.jpg);
  background-size: cover;
  padding:calc(80/750*100%) 0 0;
}
#lp_wrap  #message .message-anime01{
  width: calc(702/750*100%);
  margin-left: calc(30/750*100%);
}


/*============================
#research
============================*/
#lp_wrap  #research {
  background-color: #A1A8B8;
}
/*============================
#voice
============================*/
#lp_wrap  #voice {
  background-color: #f3f4f7;
  overflow-x: 
}
#lp_wrap  #voice  {
}

/*============================
#howto
============================*/

#lp_wrap  #howto {
}
#lp_wrap  #howto .howto-anime01 {
  width: calc(506/750*100%);
  top:65%;
  left:calc(122/750*100%);
}
#lp_wrap  #howto ul li{
  position: relative;
}
#lp_wrap  #howto .howto-anime02 {
  width: calc(415/750*100%);
  top:43%;
  left:40%;
}
#lp_wrap  #howto .howto-anime03 {
  width: calc(424/750*100%);
  top:43%;
  left:4%;
}
#lp_wrap  #howto .howto-anime04 {
  width: calc(424/750*100%);
  top:43%;
  left:40%;
}
#lp_wrap  #howto .howto-anime05 {
  width: calc(398/750*100%);
  top:28%;
  left:4%;
}
#lp_wrap  #howto .howto-anime06 {
  width: calc(374/750*100%);
  top:43%;
  left:42%;
}
#lp_wrap  #howto .howto-anime07 {
  width: calc(452/750*100%);
  top:40%;
  left:4%;
}

/*============================
#faq
============================*/
#lp_wrap  #faq {
  background-color: #FFF;
  padding-bottom: 5%;
}
#lp_wrap  #faq .accordion {
  width: calc(631/750*100%);
  margin: 0 auto calc(30/750*100%);
}
#lp_wrap  #faq .accordion dt {
  position: relative;
  cursor: pointer;
}
#lp_wrap  #faq .accordion dt:before, 
#lp_wrap  #faq .accordion dt:after {
  content:"";
  display: block;
  background-image: url(../img/faq-icon.png);
  width: calc(31/631*100%);
  padding-top: calc(3/631*100%);
  position: absolute;
  top:49%;
  right:7%;
  transition: all ease 0.2s;
}
#lp_wrap  #faq .accordion dt:before {
  transform: rotate(90deg);
}
#lp_wrap  #faq .accordion dt.selected:before {
  transform: rotate(0deg);
}
#lp_wrap  #faq .accordion dd {

  border: min(calc(2/750*100vw),2px) solid #898d9c;
  border-top: none;
  padding-bottom: calc(30/631*100%);
  display: none;
}
#lp_wrap  #faq .accordion dd .acc-inner {
  display: flex;
  flex-wrap: nowrap;
}
#lp_wrap  #faq .accordion dd .icon-wrap {
  width: calc(84/631*100%);
  padding-top: calc(34/631*100%);
}
#lp_wrap  #faq .accordion  .faq-icon {
  width: calc(31/84*100%);
  margin: 0 auto;
}
#lp_wrap  #faq .accordion  .faq-text {
  font-size: min(calc(24/750*100vw),18px);
  line-height: calc(34/24);
  padding-top: calc(34/631*100%);
  width: calc(547/631*100%);
  text-align: justify;
  padding-right: calc(30/547*100%);
  margin-top: -0.3em;
  color: #363535;
}

#lp_wrap  #faq .accordion  .faq-text a {
  border-bottom: 1px solid currentColor;
}

/* ---------------------------------------------
  
--------------------------------------------- */
.cta {
  margin: 0% auto 6%;
  width: 100%;
}
.cta .btn-cv {
  width: calc(636/750*100%);
  margin: 0 auto;
}
.cta .btn-cv img {
  width: 100%;
}
.cta.fixed {
  position: fixed;
  bottom: 1%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: none;
  margin: auto;
  z-index: 5;
}
.cta.fixed.show {
  display: block;
}
@media (min-width:1000px) {

}


footer {
  width: 100%;
  background: #353535;
  color: #fff;
  font-size: calc(20/750*100vw);
  font-weight: normal;
  text-align: center;
  line-height: 2;
  padding: 6% 0;
  font-family: sans-serif;
  position: relative;
  z-index:2;
}
footer ul {
  display: flex;
  justify-content: space-between;
  padding:0 2em;
  list-style: none;
}

footer a {
  text-decoration: none;
  color: #fff;
}
footer a:hover {
  border-bottom: 1px solid currentColor;
}
footer ul li {
  position: relative;
}
footer ul li:not(:last-of-type)::after {
  content:"|";
  display: block;
  position: absolute;
  top:0;
  right:-2em;
}
@media screen and (min-width: 769px) {
  main {
    width: 600px;
    margin: auto;
  }
  a {
    transition: all ease 0.3s;
  }
  a:hover {
    opacity: 0.8;
  }
  .cta.fixed {
    width: 600px;
    margin: auto;
    display: none!important;
  }
  footer {
    width: 600px;
    margin: auto;
    font-size: 17px;
    padding: 60px 0 60px;
    position: relative;
    z-index:2;
  }
  footer ul li:not(:last-of-type)::after {
    content:"|";
    display: block;
    position: absolute;
    top:0;
    right:-1.5em;
  }
}