@charset "utf-8";

/**********************************************
** Site Name: 不正対策.com
** Site URI: https://www.fuseitaisaku.com/
** Description: はじめての方へ
** Author: a-yamamoto
** Last Update: 2020/03/19
** Updater: a-yamamoto
**********************************************/

/*-------------------------------------------*/
/*  CONTENTS:
/*--------------------------------------------
1.0 - 汎用スタイル
    1.1 - 見出し
2.0 - こんな悩みはありませんか
3.0 - 課題解決のメリット
4.0 - 不正対策.comを導入するには

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

/*-------------------------------------------*/
/*  1.0 - 汎用スタイル
/*-------------------------------------------*/

/*  1.1 - 見出し
/*-------------------------------------------*/

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
  .first h1.heading {
	  margin-bottom: 10px;
		padding: 0 10px;
	}
	.first .heading_sub { padding: 0 10px;}
}

/*PC*/
/* 960px以上 */
@media screen and (min-width:960px) {
  .first h1.heading,
	.first .heading_sub {
    min-width: 940px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .first h1.heading { margin-bottom: 50px;}	
}


/*-------------------------------------------*/
/*  1.0 - こんな悩みはありませんか
/*-------------------------------------------*/

.first .case { position: relative;}
.first .case .image {	z-index: 100;}
.first .case .case_list ul li {
  width: 100%;
  display: table;
	table-layout: fixed;
	border-bottom: #333 1px solid;
}
.first .case .case_list ul li:last-child { border-bottom: none;}
.first .case .case_list ul li p {
  box-sizing: border-box;
  display: table-cell;
	vertical-align: top;
}
.first .case .case_list ul li p:nth-child(1) {
  width: 56px;
	box-sizing: border-box;
  position: relative;
  padding-top: 5px;
	text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-size: 2.8rem;
  color: #1d50a2;
}
.first .case .case_list ul li p:nth-child(2) {
  width: 100%;
  padding: 14px 10px 0 5px;
	line-height: 1.6em;
	font-weight: bold;
}
.first .case .case_list ul li p:nth-child(1) .case_num span {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -18px;
  letter-spacing: 1px;
  font-size: 1.0rem;
}

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
	.first .case {
	  overflow: hidden;
	  padding: 10px 0 0;
	}
	.first .case .inner { background: #eef0f2;}
	.first .case .image { 
	  position: relative;
		z-index: 100;
	}
  .first .case .image img {  width: 100%;}
	.first .case .case_list {
	  position: relative;
		top: -50px;
		z-index: 200;
	  background: #fff;
		margin: 0 10px;
		padding: 10px 10px 0;
	}
	.first .case .case_list ul li { padding: 10px 0;}
  .first .case .case_list ul li p:nth-child(2) { font-size: 1.5rem;}
}

/*PC*/
/* 960px以上 */
@media screen and (min-width:960px) {
	.first .case { height: 100%;}
	.first .case::before {
		width: 100%;
		height: 14%;;
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
		background: #eef0f2;
	}
	.first .case::after {
		content: "";
		display: block;
		padding-top: 10%;
	}
	.first .case .inner {
	  display: flex;
	}
	.first .case .case_list {
    width: calc(100% - 48%);
		box-sizing: border-box;
		position: relative;
		z-index: 200;
	}
  .first .case .image img {
	  width: calc(100% - 54%);
    max-width: 830px;
    max-height: 700px;
    position: absolute;
    right: 0;
	}
	.first .case .case_list ul li { padding: 15px 0;}
	.first .case .case_list ul li p:nth-child(2) { font-size: 1.8rem;}
}

/*-------------------------------------------*/
/*  2.0 - 課題解決のメリット
/*-------------------------------------------*/

.first .merit { background: #eef0f2;}
.first .merit .merit_list .title {
  width: 100%;
	display: table;
	table-layout: fixed;
  border-bottom: #333 1px solid;
	margin-bottom: 20px;
	padding-bottom: 15px;
}
.first .merit .merit_list .title .merit_num,
.first .merit .merit_list .title .title_txt {
  box-sizing: border-box;
  display: table-cell;
	vertical-align: top;
}
.first .merit .merit_list .title .merit_num {
  width: 56px;
	box-sizing: border-box;
  position: relative;
  padding-top: 4px;
	text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-size: 2.8rem;
  color: #1d50a2;
}
.first .merit .merit_list .title .merit_num::before {
  width: 1px;
	height: 30px;
	content: "";
	position: absolute;
	background: #333;
	top: 10px;
	right: -10px;
}
.first .merit .merit_list .title .merit_num span {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -21px;
  letter-spacing: 1px;
  font-size: 1.0rem;
}
.first .merit .merit_list .title .title_txt {
  width: 100%;
	padding: 10px 0 0 25px;
	line-height: 1.5em;
  font-weight: bold;
}
.first .merit .merit_list .thumb { margin-bottom: 20px;}
.first .merit .merit_list .thumb img {
  width: 100%;
	vertical-align: bottom;
}
.first .merit .merit_list .detail .settle {
  box-sizing: border-box;
  border-radius: 2px;
  background: #fff;
	padding: 15px 10px;
	font-weight: bold;
}
.first .merit .merit_list .detail .settle .lead { text-align: center;}
.first .merit .merit_list .settle_detail {
  width: 100%;
	display: table;
	table-layout: fixed;
	text-align: center;
}
.first .merit .merit_list .settle .settle_detail p {
  width: 50%;
	height: 130px;
	box-sizing: border-box;
  display: table-cell;
	border-right: #333 1px solid;
	padding-top: 85px;
	vertical-align: top;
	font-size: 1.2rem;
}
.first .merit .merit_list .settle .settle_detail p:last-child { border-right: none;}
.first .merit .merit_list .settle .settle_detail p span { display: block;}
.first .merit .merit_list li:nth-child(2) .settle .settle_detail p { width: 33.3%;}
.first .merit .merit_list li:nth-child(1) .settle .settle_detail p:nth-child(1) { background-image: url("../img/first/ico_first01_01.gif");}
.first .merit .merit_list li:nth-child(1) .settle .settle_detail p:nth-child(2) { background-image: url("../img/first/ico_first01_02.gif");}
.first .merit .merit_list li:nth-child(2) .settle .settle_detail p:nth-child(1) { background-image: url("../img/first/ico_first02_01.gif");}
.first .merit .merit_list li:nth-child(2) .settle .settle_detail p:nth-child(2) { background-image: url("../img/first/ico_first02_02.gif");}
.first .merit .merit_list li:nth-child(2) .settle .settle_detail p:nth-child(3) { background-image: url("../img/first/ico_first02_03.gif");}
.first .merit .merit_list li:nth-child(3) .settle .settle_detail p:nth-child(1) { background-image: url("../img/first/ico_first03_01.gif");}
.first .merit .merit_list li:nth-child(3) .settle .settle_detail p:nth-child(2) { background-image: url("../img/first/ico_first03_02.gif");}
.first .merit .merit_list li .settle .settle_detail p {
  background-size: 80px;
	background-repeat: no-repeat;
	background-position: center top;
}

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
  .first .merit {	padding: 0 10px 40px;}
	.first .merit .merit_list .title .title_txt { font-size: 2.0rem;}
	.first .merit .merit_list .txt {
	  height: auto;
		margin-bottom: 20px;
	  font-size: 1.2rem;
	}
	.first .merit .merit_list .detail .settle { margin-bottom: 30px;}
	.first .merit .merit_list .detail .settle .lead {
	  margin-bottom: 10px;
	  font-size: 1.5rem;
	}
}

/*PC*/
/* 960px以上 */
@media screen and (min-width:960px) {
	.first .merit {	padding: 0 0 70px;}
	.first .merit .merit_list {
	  width: 100%;
		display: flex;
	}
	.first .merit .merit_list li { width: 33.3%;}
	.first .merit .merit_list li:nth-child(1) { margin-right: 20px;}
	.first .merit .merit_list li:nth-child(2) { margin: 0 20px;}
	.first .merit .merit_list li:nth-child(3) { margin-left: 20px;}
	.first .merit .merit_list .title .title_txt { font-size: 2.1rem;}
	.first .merit .merit_list .txt {
	  height: 140px;
	  font-size: 1.5rem;
	}
	.first .merit .merit_list .detail .settle .lead {
	  margin-bottom: 10px;
	  font-size: 1.8rem;
	}
}

/*-------------------------------------------*/
/*  4.0 - 不正対策.comを導入するには
/*-------------------------------------------*/

.first .flow .flow_list {
  width: 100%;
  display: flex;
}
.first .flow .flow_list li {
  width: 25%;
	position: relative;
  text-align: center;
}
.first .flow .flow_list li::before,
.first .flow .flow_list li::after {
  position: absolute;
  display: block;
  content: '';
  width: 25px;
  height: 2px;
  background: #1d50a2;
  border-radius: 4px;
}
.first .flow .flow_list li::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.first .flow .flow_list li::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.first .flow .flow_list li:last-child::before,
.first .flow .flow_list li:last-child::after { content: none;}
.first .flow .flow_list li img {
  position: relative;
	z-index: 200;
	margin-bottom: 20px;
}
.first .flow .flow_list li span {
  position: absolute;
	top: -30px;
	left: 0;
	ont-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	color: #d4deee;
}
.first .flow .flow_list li p {
	box-sizing: border-box;
  border-radius: 20px;
  background: #1d50a2;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	font-weight: bold;
	color: #fff;
}
.first .flow .flow_btn .btn { margin: 0 auto 50px;}

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
  .first .flow { padding: 30px 10px;}
	.first .flow .flow_list { margin: 30px 0;}
	.first .flow .flow_list li::before,
	.first .flow .flow_list li::after {
	  width: 15px;
		top: 28%;
		right: -8px;
	}
	.first .flow .flow_list li::before { margin-top: -4px;}
	.first .flow .flow_list li::after { margin-top: 5px;}
	.first .flow .flow_list li img { width: 80px;}
	.first .flow .flow_list li span {
	  top: -10px;
	  left: 10%;
	  font-size: 4.3vw;
	}
	.first .flow .flow_list li p {
	  width: 90%;
    padding: 5px;
	  font-size: 1.3rem;
	}
}

/*PC*/
/* 960px以上 */
@media screen and (min-width:960px) {
	.first .flow { padding: 70px 0}
	.first .flow .flow_list { margin: 50px 0;}
	.first .flow .flow_list li::before,
	.first .flow .flow_list li::after {
		top: 36%;
		right: -10px;
	}
	.first .flow .flow_list li::before { margin-top: -8px;}
	.first .flow .flow_list li::after { margin-top: 8px;}
	.first .flow .flow_list li img { width: 180px;}
	.first .flow .flow_list li span { font-size: 6.0rem;}
	.first .flow .flow_list li p {
	  width: 140px;
		font-size: 1.8rem;
	}
}