@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------------------------------------

  再定義（layout.css）
	
------------------------------------------------------------------------------------------- */
.p-promotion .contents a { color: #df4577; background-color: #ffffff; font-weight: bolder;}
.p-promotion .contents a:hover { color: #ffffff; background-color: #df4577;	border: 2px solid #ffffff;}

@media screen and (max-width: 768px) {
		.title-p-page-inner h1.p-title { text-align: center;}
}

@media screen and (max-width: 1230px) {
  .title-p-page-inner h1.p-title { font-size: 4.0rem;}
  .title-p-page-inner h1.p-title span { font-size: 2.0rem;}
  .title-p-page-inner h2.p-title { font-size: 2.4rem;}
}
@media screen and (max-width: 768px) {
  .title-p-page-inner h1.p-title { font-size: 2.8rem;}
}


.outline-lp .p-btn{
  font-size: 2.0rem;
}
@media screen and (max-width: 768px) {
  .outline-lp .p-btn{
    font-size: 1.8rem;
    line-height: 1.2;
  }
}

.p-btn{
  padding: 25px;
  font-size: 1.7rem;
}

/* ----------------------------------------------------------------------------------------

  MaLion ランディングページ
	
------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------
  タイトル
------------------------------------------------------------------------------------------- */
.title-p-page-inner { display: flex; justify-content: center; align-items: center;}
#title-content { width: auto; width: 60%;}
#title-form { width: 420px; width: 35%; min-height: 450px; margin-left: 40px; margin-left: 5%; padding: 30px 20px; background: #f3f3f3; border-radius: 4px; filter: drop-shadow(0 0 10px rgba(0,0,0,0.1)); z-index: 1000;}
#title-form h2 { color: #177777; font-size: 2.0rem; font-weight: bold;}
#title-form p {font-size: 1.6rem; text-align: left !important;;}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { font-size: 1.8rem !important; font-weight: bold; letter-spacing: 1px; border: none !important; background-color: #1C8E8D !important; background-color: #3D91D8 !important; background-image: none !important; border-radius: 50px !important; padding: 10px 40px !important; 	-moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;	-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {	background-color: #177777 !important; background-color: #025AA5 !important;}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:active { background-color: #177777 !important; background-color: #025AA5 !important;}

.title-p-page-inner h2.p-title {
  color: #fff;
	font-size: 2.8rem;
	font-weight: bold;
	text-align: left;
	letter-spacing: 1px;
}

.title-p-page-inner ul {
	width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.title-p-page-inner ul li {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: url("/malion/lp/information-leakage-resignee/images/take01.png") center bottom / contain no-repeat #fff;
  margin: 5px;
}

.title-p-page-inner ul li:nth-child(1) { background-image: url("/malion/lp/information-leakage-resignee/images/take01.png")}
.title-p-page-inner ul li:nth-child(2) { background-image: url("/malion/lp/information-leakage-resignee/images/take02.png")}
.title-p-page-inner ul li:nth-child(3) { background-image: url("/malion/lp/information-leakage-resignee/images/take03.png")}
.title-p-page-inner ul li:nth-child(4) { background-image: url("/malion/lp/information-leakage-resignee/images/take04.png")}

.title-p-page-inner ul li h3 {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 35%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :140px;
  text-align:center;
	font-size: 1.8rem;
	font-weight: bold;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
	line-height: 1.25;
  padding: 0 15px;
}

@media screen and (max-width: 1230px) {
  #title-content { width: 50%;}
  #title-form { width: 47.5%; margin-left: 2.5%;}
}

@media screen and (max-width: 768px) {
		#title-content {width: 100%;}
		#title-form {display: none;}
    .title-p-page-inner h2.p-title { text-align: center;}
    .title-p-page-inner ul { justify-content: center;}
    .title-p-page-inner ul li h3 { font-size: 1.4rem;}
}


/* ----------------------------------------------------------------------------------------
  コンテンツ
------------------------------------------------------------------------------------------- */
.outline-lp {
	padding: 80px 0;
}

.contents mark.lp-mark {
	color: #90949C;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: 4px;
}

mark.lp-mark.red  { color: #e95383;}
mark.lp-mark.blue {	color: #194084;}

.contents h2.lp-h2 {
	font-size: 4.0rem;
	font-weight: normal;
	font-weight: bold;
	text-align: center;
	line-height: 1.25;
	letter-spacing: 1px;
}

.contents h2.lp-h2 em {
	font-size: 4.8rem;
  background: linear-gradient(to bottom,transparent 0,transparent 80%,#f7d370 80%,#f7d370 90%,transparent 90%);
  padding: 0 5px;
}

.contents h2.lp-h2 span {
	font-size: 5.6rem;
}

.contents h3.lp-h3 {
  color: #e95383;
	font-size: 3.2rem;
	font-weight: bold;
  text-align: center;
	line-height: 1.25;
	letter-spacing: 1px;
}

.contents p.lp-p {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

/* 概要 */
.outline-lp .contents {
	padding: 0 0 40px 0;
}

.outline-lp .contents ul {
	width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.outline-lp .contents ul li {
  width: 48%;
	display: inline-block;
  background: #FFEFAF;
  border-radius: 4px;
  padding: 40px;
  margin: 1%;
  position: relative;
}
@media screen and (max-width: 480px) {
  .outline-lp .contents ul li {
    width: 100%;
  }
}


.outline-lp .contents ul li h4 {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 2.0;
  text-align: center;
}

.outline-lp .contents ul li p {
	font-size: 1.6rem;
	margin: 0;
}

.outline-lp .contents ul li figure {
}

.outline-lp .contents ul li .ribbon {
  display: block;
  position: absolute;
  left: -5px;
  top: -5px;
  width: 100px;
}


@media screen and (max-width: 768px) {
		.outline-lp, .telework-lp, .products-lp { padding: 40px 16px;}
		.contents mark.lp-mark { font-size: 1.4rem; }
		.contents h2.lp-h2 { font-size: 2.8rem; }
    .contents h2.lp-h2 em {	font-size: 3.2rem;}
    .contents h2.lp-h2 span {	font-size: 3.6rem;}
		.contents h3.lp-h3 { font-size: 2.0rem; }
		.contents p.lp-p { font-size: 1.6rem; }
    .outline-lp .contents ul li {  padding: 30px;}
		.outline-lp .contents ul li h4 { font-size: 1.8rem;}
    .outline-lp .contents ul li p {	font-size: 1.4rem;}
}

@media screen and (max-width: 480px) {
		.outline-lp { padding: 0; margin-bottom: 40px; margin: 5%;}
		.outline-lp .contents ul li { width: 98%; margin: 2% 1%; padding: 20px;}
}