@charset "utf-8";

/* -------------------------------------------------- 
 * security_check.css
 * 
 * EC-CUBE公式セキュリティチェック　LP用CSS
-------------------------------------------------- */



/* Base
   ----------------------------------------------------------------- */
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
    line-height: 2;
    font-family: 'YakuHanJP','Noto Sans JP',"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #383B4A;
    background: url('/wp-content/themes/eccube/img/lp/security-check/bg_main.png');
    background-size: cover;
}

img{
    max-width: 100%;
    height: auto;
}
a{
    color: #3a3a3a;
    text-decoration: none;
}

.js-inview{
  opacity: 0;
  transform: translateY(30px);
  transition: .6s;
}
.js-inview.is-fadeIn{
  opacity: 1;
  transform: translateY(0px);
}
@media (min-width:768px){
  .p-speakers__info.js-inview:nth-child(4n){
    transition-delay: .6s
  }
  .p-speakers__info.js-inview:nth-child(4n-1){
    transition-delay: .4s
  }
  .p-speakers__info.js-inview:nth-child(4n-2){
    transition-delay: .2s
  }
}
h1,h2,h3,h4,h5 {
  margin: 0;
  padding: 0;
  line-height: 1.41;
}
p, div {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
a:hover {
  opacity: 0.8;
}

/* -------------------------------------------------- 
 　loading
-------------------------------------------------- */
.p-progress{
  background: rgba(0,0,0,1);
  color: rgba(255,255,255,1);
  width: 100%;
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  opacity: 1;
}
.p-progress__bar{
  border-top: 1px solid rgb(160, 160, 160);
  color: rgba(255,255,255,1);
  position: absolute;
  top:50%;
  width: 0%;
}
.p-progress.is-complete{
  display: none;
}


/* -------------------------------------------------- 
 　main
-------------------------------------------------- */

:root {
  /*ベースとなるカラー*/
  --u-color: #144597;
  --u-color_soft: #6593bd;
  --u-color_light: #d7dfee;
  --u-color_plan01: #008bcd;
  --u-color_plan02: #00bb78;
}
.u-color { color: var(--u-color);}
.u-color_soft { color: var(--u-color_soft);}
.u-color_light { color: var(--u-color_light);}
.u-color_plan01 { color: var(--u-color_plan01);}
.u-color_plan02 { color: var(--u-color_plan02);}
.u-bg-color { background-color: var(--u-color);}
.u-bg-color_soft { background-color: var(--u-color_soft);}
.u-bg-color_light { background-color: var(--u-color_light);}
.u-bg-color_plan01 { background-color: var(--u-color_plan01);}
.u-bg-color_plan02 { background-color: var(--u-color_plan02);}
.img_adjuster {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
@media (min-width:1050px){
.img_adjuster {
  max-width: 1000px;
  margin: 0 auto;
  display: block;
}
}
.font_din {
  font-family: "din-2014", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
}
.p-triangle {
  width: 20px;
  display: block;
  margin: 0 auto;
}
.p-triangle_absolute {
  content: "";
  position: absolute;
  width: 20px;
  display: block;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
}
/* .p-gnav
-------------------------------------------------- */
/* .container */
.p-g_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  z-index: 99;
  transition: all 0.2s 0s ease;
}
.p-g_nav .l-inner {
  padding: 0;
  height: inherit;
}
.p-gnav__menu-link:last-child {
margin-right: 15px;
}
.p-g_nav > .l-inner > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  height: inherit;
}
@media (min-width: 768px){
.p-g_nav > .l-inner > div {
  justify-content: space-between;
}
}
/* .p-logo_icon */
a.p-logo_icon {
  background-image: url(/wp-content/themes/eccube/img/lp/security-check/eccube_logo_white.png);
  max-width: 144px;
  margin: 15px 0 0 15px;
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  transition: all 0.2s 0s ease;
}
@media (min-width: 768px){
a.p-logo_icon {
  max-width: 224px;
  margin: 0 0 0 20px;
}
}
/* .p-gnav__menu */
.p-gnav__menu {
  display: none;
  font-size: var(--u-text__s);
  transition: all 0.2s 0s ease;
}
@media (min-width: 768px){
  .p-gnav__menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.p-gnav__menu-link a {
  margin: 0 0 0 25px;
  color: #fff;
}
.p-nav__cvp {
  background: #000;
    height: 100%;
    width: 140px;
}
.p-nav__cvp a {
  display: flex;
  color: #fff;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/* スクロールしたとき */
.p-g_nav.scrolled a.p-logo_icon {
  background-image: url(/wp-content/themes/eccube/img/lp/security-check/eccube_logo.png);
  max-width: 144px;
}
.p-g_nav.scrolled .p-gnav__menu-link a {
  color: #333;
  font-size: var(--u-text__xs);
}
@media (min-width: 768px){
  .p-g_nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    height: 45px;
  }
  .p-g_nav.scrolled a.p-logo_icon {
    max-width: 180px;
  }
}

/* p-first_view
-------------------------------------------------- */
.p-first_view {
    min-height: 360px;
    background: url(/wp-content/themes/eccube/img/lp/security-check/firstview_img@2x.png);
    background-size: cover;
    background-position: center;
}
.p-first_view .l-inner {
  height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: unset;
  padding-top: var(--u-length__l);
}
.p-first_view .l-inner img:first-child{
  width: 100%;
  height: auto;
}
.p-first_view .l-inner img:last-child{
  width: 150px;
  height: auto;
  margin: 0 auto;
}
@media (min-width: 768px){
  .p-first_view .l-inner {
    height: 460px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .p-first_view .l-inner img:first-child{
    width: 40%;
    height: auto;
    margin: 0% 0 0 0;
  }
  .p-first_view .l-inner img:last-child{
    width: 15%;
    margin: 0;
  }
}
.p-first_view h3 {
    font-size: 3rem;
    line-height: 1;
}
.p-first_view h2 {
    font-size: 4.7rem;
    line-height: 1;
    margin: 10px 0 0 0;
}
/* p-about
-------------------------------------------------- */
.p-about {

}
.p-about::before {
  content: "";
  position: absolute;
  min-height: 360px;
    background: url(/wp-content/themes/eccube/img/lp/security-check/service_plans_img@2x.png);
    background-size: cover;
    background-position: center;
}
.section_heading_en,
.section_heading {
  text-align: center;
  font-weight: bold;
  line-height: 1;
  margin: 0;
}
.section_heading_en {
  font-size: 2.8rem;
  font-family: "din-2014", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
}
.section_heading {
  font-size: 1.3rem;
}
/* problem */
.p-problem img {
  width: 70%;
  margin: 0 auto;
}
.p-about04 {

}
@media (min-width: 768px){
  .section_heading_en {
    font-size: 2.8rem;
  }
  .section_heading {
    font-size: 1.3rem;
  }
  .p-problem img {
    width: 200px;
    margin: 0 25px 0 0;
  }
  .p-problem img:last-child {
    margin: 0 0px 0 0;
  }
  .p-about04 {
    max-width: 700px;
    margin: 0 auto;
    display: block;
  }
}
@media (min-width: 1000px){
  .p-problem img {
    width: 300px;
  }
  .p-about04 {
    max-width: 770px;
  }
}
/* .p-service
-------------------------------------------------- */
.p-service::before {
  content: "";
  position: absolute;
  min-height: 527px;
  background: url(/wp-content/themes/eccube/img/lp/security-check/service_plans_img@2x.png);
  background-size: cover;
  background-position: center;
  width: 100%;
  z-index: -1;
}
/* plans */
@media (min-width: 768px){
  .p-plans img:first-child {
    width: calc( 532px - 200px);
  }
  .p-plans img:last-child {
    width: calc( 504px - 200px);
    margin: 0 0 0 20px;
  }
}
@media (min-width: 1000px){
  .p-plans img:first-child {
    width: calc( 532px - 30px);
  }
  .p-plans img:last-child {
    width: calc( 504px - 30px);
    margin: 0 0 0 20px;
  }
}



/* .p-owner_registration
-------------------------------------------------- */
@media (min-width: 768px){
.p-owner_registration .left{
  max-width: 78%;
  margin-right: 30px;
}
.p-owner_registration .right{
  max-width: 230px;

}
}
.p-owner_registration_bg {
  z-index: 1;
}
.p-owner_registration_bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100% - 130px);
  background-color: var(--u-color_light);
  z-index: -1;
}
.p-owner_registration_bottom_content {
  width: 85%;
  margin: 0 auto;
  display: block;
}
.p-owner_registration_bottom_content > div:first-child{
  border-radius: 6px;
}

/* .p-application
-------------------------------------------------- */
.p-application {
    background: #ddd;

}
.p-application01,
.p-application02 {
  filter: var(--u-drop-shadow__01);
  padding: 60px 15px 30px 15px;
}
.p-application01 {
  border-top: 5px solid var(--u-color_plan01);
}
.p-application02 {
  border-top: 5px solid var(--u-color_plan02);
}
.p-icon {
  position: absolute;
  width: 100%;
  height: 100px;
  margin: 0 0 0 0;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
}
.p-icon img {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  display: block;
}
.p-self_check_band {
  background-color: var(--u-color_plan01);
  padding: 15px;
}
.p-self_check_band p {
  color: white;
  text-align: center;
}
/* flow */
.p-flow_title {
  padding: 4px 15px;
    background-color: var(--u-color);
    border-radius: 0px;
    color: white;
    display: block;
    margin: 0px auto;
    width: 100%;
    font-weight: bold;
}
.p-flow > div {
  width: 100%;
  filter: var(--u-drop-shadow__01);
  margin: 0 0 15px 0;
  z-index: 1;
}
.p-flow > div::before {
  content: "";
  background-color: var(--u-color__light_yellow);
  position: absolute;
  width: 76px;
  height: 76px;
  top: 0;
  left: 0;
  z-index: -1;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.p-flow_container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100% - 50px);
  background-color: var(--u-color_light);
  z-index: -1;
}
.p-flow .head {
  font-size: var(--u-text__r);
  font-weight: bold;
  display: flex;
  align-items: center;
  color: var(--u-color);
}
.p-flow .head .number {
  font-size: 5rem;
  font-family: "din-2014", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  margin: 0 5px 0 0;
  line-height: 1;
}
.p-cvp01_container {
  width: 90%;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  border: 6px solid #fff;
  filter: var(--u-drop-shadow__01);
  background: linear-gradient(0deg, #002ea2 0%, #008bcd 100%);
  padding: 35px 20px;
  
}
.p-cvp01_container p {
  width: calc(100% - 10px);
  text-align: center;
  font-weight: bold;
  margin: 20px auto;
}
.p-cevron_img {
  position: unset;
  width: 70px;
  display: block;
  margin: 20px auto 0 auto
}
.p-muryo {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}
.p-cvp02 {
  width: 70%;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}
@media (min-width: 768px){
.p-flow > div {
  width: calc(100% - 4%);
  filter: var(--u-drop-shadow__01);
  margin: 0;
}
.p-flow > div:not(:first-child) {
  margin: 0 0 0 2%;
}
.p-flow > img {
  width: 15%;
  margin: 0;
}
.p-cvp01_container p {
  width: calc(100% - 160px);
  text-align: center;
  font-weight: bold;
  margin: 0 auto;
}
.p-cevron_img {
  position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    left: 25px;
    width: 70px;
    height: 60px;
    margin: 0;
}
}

/* .p-followup
-------------------------------------------------- */
.p-followup::before {
  
}
.p-followup .l-inner .l-flex-row div:first-child {
  width: 100%;
}
.p-followup .l-inner .l-flex-row div:last-child {
  width: 100%;
}
@media (min-width: 768px){
  .p-followup_img {
    position: absolute;
    width: calc( 40% + ((100vw - 100% - 100px)/2) - 0px)!important;
    height: 280px;
    top: 0;
    right: 0;
    background: url(/wp-content/themes/eccube/img/lp/security-check/follow_img@2x.png);
    background-size: cover;
    background-position: center;
    z-index: -1;
  }
  .p-followup_img::before {
    content: "";
    position: absolute;
    min-height: 400px;
    width: 100%;
  }
  .p-followup .l-inner > p,
  .p-followup .l-inner > h3 {
    text-align: left;
  }
.p-followup .l-inner .l-flex-row div:first-child {
  width: 60%;
}
.p-followup .l-inner .l-flex-row div:last-child {
  width: calc(40% - 50px);
}
.p-followup_button {
  max-width: 400px;
}
}
/* footer
-------------------------------------------------- */
.l-footer {
  height: 340px;
}
.l-footer::before {
  content: "";
  position: absolute;
  height: 100%;
  background: url(/wp-content/themes/eccube/img/lp/security-check/footer@2x.png);
  background-size: cover;
  background-position: bottom;
  width: 100%;
  z-index: -1;

}
.l-footer .l-inner p {
  border: 1px solid #fff;
  border-radius: 4px;
  color: white;
  display: block;
}
/* .p-footer__copy {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
} */
.l-footer img {
  width: 200px;
  margin: 5px auto;
  display: block;
}
.p-tsukushi_r {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.p-tsukushi_b {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.p-side {
  display: none;
}
@media (min-width: 768px){
.p-side {
  display: block;
  position: absolute;
  right: 0;
  top: 50px;
  width: 34px;
  height: 150px;
  padding: 10px 20px 0 0;
  border-top: 1px solid #144597;
}
.p-side_white {
  border-top: 1px solid #fff;
}
}
.p-notification {
  background-color: #fff;
  color: #393a4a;
  padding: 8px 4px;
  text-align: center;
  width: calc(100% - 0px);
  margin: 0 auto;
  border-radius: 4px;
  font-weight: bold;
  margin-top: 15px;
}
@media (min-width: 768px){
.p-notification {
  width: calc(100% - 260px);
}
}