@charset "UTF-8";
/* ランディングページCSS */

html {scroll-behavior : smooth;}

body {
    margin           : 0;
    font-family      : "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size        : 1rem;
    font-weight      : 400;
    line-height      : 1.5;
    color            : #595757;
    text-align       : left;
    background-color : #FFF;
}
h1,h2,h3,h4,h5,p{margin: 0; padding: 0}

.wrapper {
    margin-left : 0;
    position    : relative;
    min-height  : 100%;}


 /*=== コンテナサイズ・余白等 ========================= */
.lp-header { width: auto;}

.lp-980,
.lp-nav,
.lp-image,
#lp-secure{ max-width: 980px; margin: auto; z-index: 5; position: relative;}

.lp-nav,
.lp-image{ text-align: center;}

.lp-plan,
#lp-secure{ padding-bottom: 6rem;}

.lp-service,
#lp-formbox {background: #F1FAFB; padding-bottom: 3rem;}

 /*=== button（どこのか不明） ========================= */
.btn.btn-primary {
    background   : #4A3B78;
    border-color : #64616F;
}
.btn.btn-primary:active {
    background   : #9585C7 !important;
    border-color : #64616F !important;
    box-shadow: 0 0 0 0.2rem rgba(192, 124, 255, 0.25) !important;
}
 /*=== ruby ========================= */
[data-ruby] {
    position: relative;
	color: #302661;
	font-weight: 900;
	font-size: 2rem;
	padding: 0 .3rem;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;}

 /*=== header ========================= */
.lp-header {
  background: url( "/img/assets/sub_visual1.png");
  background-size: cover;
  width: 100vw;
  position: relative;
  z-index: 1;}
.lp-header::before {
  content: "";
  background: rgba(255,255,255,.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;}
.lp-header h1 { margin: .2rem auto 2rem; font-size: .2rem; font-weight: normal; color: #9e9e9e; text-align: right;}
.lp-header p { padding: 3rem 0; width: 540px;}
.lp-header-txt{ filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 1));}
.lp-header-pc{ position: absolute; top: 4.5rem; right: 0; height: 360px;}

 /*=== 全体共通 ========================= */
.lp-nav img,
.lp-image img{ margin : 4rem 2rem;}

.lp-nav img:hover,
.lp-btn img:hover{ opacity: 0.6; transition-duration: 0.3s;}

.lp-content h2 {
    color     : #57BCC6;
    font-size : 2.5rem;
    padding    : 6rem 0 0 0;
	text-align: center;
}
.lp-subttl {
	text-align: center;
	font-size: 1.5rem;
	font-weight : normal;
	padding: 6rem 0;}
.lp-subttl2 {
	text-align: center;
	font-size: 1.8rem;
	font-weight : normal;
	padding: 6rem 0;}
	
.lp-subttl2 i { margin-right: .5rem;}
.lp-message { padding:3rem 0;}
.lp-btn {text-align: center;}

 /*=== サービス内容 ========================= */
.lp-plan {overflow: hidden;}
.lp-plan>div { width:450px; margin:0 20px; float: left;}
.lp-list-ttl{ font-size: 1.2rem; font-weight: 900; border-bottom: 3px solid #57BCC6; padding: 1rem 1rem 1rem 4rem;
background-image:url(/img/assets/cloudent_icon.svg); background-size:40px; background-repeat:no-repeat; background-position: 12px 7px;}
.lp-list-txt{ font-size: 1rem; padding: 1rem; height: 130px;}

/* 注意事項 */
.lp-info1{
	padding: 1rem;
    font-size: .9rem;
    margin: 1rem 0;}
.lp-info1-txt{font-size: .9rem;} 

.lp-info2{
	margin: 2rem 0;
	}
.lp-info2-ttl{
	padding:.5rem 1rem;
	color: #FFF;
	background: #E27171;
	font-weight: bold;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	}
.lp-info2-txt{
	padding: 1rem;
    border: 1px solid #E27171;
    background: #fff;
    font-size: .9rem;
    margin-bottom: 1rem;} 

 /*=== ３つの安心 ========================= */
#lp-secure h4 {
    color      : #57BCC6;
    font-size  : 2.5rem;
	text-align: center;
	font-weight: 500;
	padding-bottom:3rem;}

#lp-secure { text-align: center;}
#lp-secure p{
    font-size: 1.5rem;
    font-weight: normal;
	padding-top:6rem;
	padding-bottom:2rem;
	text-align: center;
}

 /*=== form ========================= */
#lp-formbox h5{
    font-size: 1.8rem;
    font-weight: normal;
	padding-top:6rem;
	padding-bottom:2rem;
	text-align: center;
}

#lp-formbox .lp-description {
    width         : 800px;
}

#lp-formbox p {
    text-align    : left;
    margin        : auto;
    margin-bottom : 4rem;
}

#lp-form {
    width      : 800px;
    text-align : left;
    margin     : auto;
    padding    : 2rem;
    background : #FFF;
	/*margin-bottom : 4rem;*/}

 /*=== footer ========================= */
#lp-footer {
    background : #302661;}
#lp-footer-wrap {
    width           : 800px;
    margin          : auto;
    justify-content : space-between;
    align-items     : center;
    color           : #FFF;
    font-size       : .8rem;}

.lp-footer-content {
    padding        : 1rem;
    text-align     : left;
    display        : inline-block;
    vertical-align: text-top;
	margin: 0 1rem;}

.lp-footer-content ul {
    list-style   : none;
    padding-left : 0;}

.lp-footer-content i {
    margin-right : .5rem;}

.lp-footer-content a,
.lp-footer-content a:link,
.lp-footer-content a:hover,
.lp-footer-content a:visited,
.lp-footer-content a:active {
    color : #FFF;
	text-decoration: underline;}
#footer {
    height : auto;
    position : static;}

 /*=== スライドのアニメーション ========================= */
.lp-slide-box {
	position : absolute;
	width : 390px;
	height : 228px;
	top: 5.1rem;
	right: .7rem;
	margin : auto;
	overflow : hidden;
}

.lp-slide-box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite;
}

.lp-slide-box .src1 {
  background-image : url(/img/assets/display_slide_1.png);
}
.lp-slide-box .src2 {
  background-image : url(/img/assets/display_slide_2.png);
  animation-delay  : 5s;
}
.lp-slide-box .src3 {
  background-image : url(/img/assets/display_slide_3.png);
  animation-delay  : 10s;
}
.lp-slide-box .src4 {
  background-image : url(/img/assets/display_slide_4.png);
  animation-delay  : 15s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   7% { opacity: 1; }
  25% { opacity: 1; }
  32% { opacity: 0; }
 100% { opacity: 0; }
}

 /*=== ページトップ ========================= */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: #9e9e9e;
  opacity: 0.6;
  border-radius: 50%;
  }
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 5px;
  left: 13px;
  margin: auto;
  text-align: center;
}

Resources
 /*=== 追加 ================================= */

.css-form-error p{
    width: auto!important;
}

.css-error p{
    margin        : auto!important;
    margin-bottom : 1rem!important;
}

.css-pagetitle {
    font-size   : 1.4rem;
    font-weight : bold;
    margin      : 15px 0;
}

.css-line {
    border-width  : 3px;
    margin-bottom : 20px;
}