@charset "UTF-8";
* {
  box-sizing: border-box;
}

/*Reset*/
h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
  border: none;
  border-collapse: collapse;
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
  line-height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
}

/*全体------------------------------------------------*/
html {
  font-size: 62.5%;
}

body {
  background: #fff;
  color: #171717;
  font-family: "Roboto", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 20px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/*リンク----------------------------*/
a {
  color: #000;
  text-decoration: none;
}

img {
  max-width: 100%;
}

figure {
  margin: 0;
}

.txt_red {
  color: #ff0000;
}

/* common styles */
div.t {
  display: table;
  width: 100%;
}

div.t div.col {
  display: table-cell;
}

.wrapper {
  box-sizing: border-box;
  margin: 0 auto;
  width: 1000px;
}

/*ヘッダ -------------------------------- */
header {
  background: #fff;
  left: 0;
  padding: 0;
  top: 0;
  width: 100%;
  z-index: 3;
}

header .wrapper {
  width: 1020px;
}

header .h_cont {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

header h1 {
  max-width: 230px;
}

header div.col.button {
  margin: 15px 0;
  transform: scale(1);
  transition: 0.3s;
}

header div.col.button:hover {
  transform: scale(1.07);
}

header .tel {
  font-size: 16px;
  letter-spacing: 0.03em;
  margin-right: 20px;
  text-align: center;
}

header .tel span {
  color: #000;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.023em;
  padding-left: 0;
}

.catch {
  color: #E72940;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  margin-left: 20px;
  text-align: left;
}

/*ファーストビュー -------------------------------- */
.fv {
  background: url(../images/fv_bg.jpg) center/cover no-repeat;
  padding: 60px 0 0;
}

.fv_head {
  margin: 0 0 20px 18.6%;
  width: 575px;
}

.fv_main {
  margin: 0 auto;
  width: 786px;
}

/*追従ボタン -------------------------------- */
#float{
  top:84%;
  right:0;
  position: fixed;
  padding:15px 20px;
  border-radius: 10px 0 0 10px;
  background: #000;
  color:#fff;
  z-index: 4;
}
#float .tel{
  padding: 6px 0;
  font-size:24px;
  font-size:2.4rem;
}
.float__tltle{
  font-size:14px;
  font-size:1.4rem;
  border-bottom: 1px solid #fff;
  line-height: 1.7;
}
.float__time{
  font-size: 11px;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}
#float2{
  top:66%;
  right:0;
  position: fixed;
  color:#fff;
  z-index: 4;
}
#float2 img{
  width:290px;
  height:auto;
}

section {
  padding-top: 85px;
  position: relative;
  text-align: center;
}

h2 {
  text-align: center;
}

p {
  text-align: center;
}

/***************************************
CTA AREA
***************************************/
.space_contact {
  background: #fff;
  padding: 100px 0;
}

.space_contact_text {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: -40px;
  position: relative;
}

.space_contact .button {
  margin: 35px 0 0 -40px;
}

/***************************************
初めての探偵社探しは
わからないことばかり
***************************************/
#problems {
  background: #c2eeef;
  position: relative;
}

#problems:after {
  background: url(../images/arrow.png) center/contain no-repeat;
  bottom: -20px;
  content: '';
  display: block;
  height: 57px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 101px;
  z-index: 1;
}

.problems_title {
  font-size: 36px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 40px;
}

.problems_img {
  margin: 0 auto;
  width: 865px;
}

/***************************************
あなたにぴったりの
探偵社をご紹介
***************************************/
#intro {
  background: #fee4e2;
  padding-bottom: 85px;
}

.intro_catch {
  margin: 0 auto 80px;
  width: 570px;
}

.intro_img {
  margin-bottom: 50px;
}

.intro_desc {
  font-size: 18px;
  line-height: 2;
  margin-bottom: 80px;
}

.step {
  background: #fff;
  border-radius: 2px;
  position: relative;
}

.step_title {
  background: #ff738e;
  border-radius: 30px;
  color: #fff;
  display: inline-block;
  font-size: 27px;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 16px 48px;
  position: relative;
  text-align: center;
  top: -20px;
}

.step_title span {
  font-size: 40px;
  padding: 0 0.1em;
}

.step_free_icon {
  height: 93px;
  position: absolute;
  right: 20px;
  top: -30px;
  width: 141px;
}

.step_list {
  display: flex;
  justify-content: space-between;
  padding: 20px 80px;
}

.step_item {
  position: relative;
  width: 230px;
}

.step_item:not(:last-child):before {
  background: url(../images/step_arrow.png) left top/contain no-repeat;
  bottom: 40px;
  content: '';
  display: block;
  height: 15px;
  margin: auto;
  position: absolute;
  right: -50px;
  width: 55px;
}

.step_item:not(:last-child) .step_txt_box {
  width: 95%;
}

.step_img {
  margin-bottom: 10px;
}

.step_img img {
  width: 230px;
}

.step_icon {
  margin-right: 10px;
  width: 39px;
}

.step_txt_box {
  align-items: center;
  display: flex;
  height: 84px;
  justify-content: center;
}

.step_txt {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
}

.step_just {
  display: inline-block;
  vertical-align: text-bottom;
  width: 93px;
}

/***************************************
さまざまなご要望にお応えします
***************************************/
#example {
  background: #ff738e;
  padding: 60px 0;
}

.example_title {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 36px;
  font-weight: bold;
  justify-content: center;
  letter-spacing: 0.015em;
  margin-bottom: 60px;
  position: relative;
  text-align: center;
}

.example_title:before, .example_title:after {
  background: #fff;
  bottom: 0px;
  content: '';
  display: block;
  height: 7px;
  position: relative;
  width: 100px;
}

.example_title:before {
  left: -10px;
  transform: rotate(50deg);
}

.example_title:after {
  right: -10px;
  transform: rotate(-50deg);
}

.example_txt {
  color: #fff;
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 50px;
}

/***************************************
選ばれる3つのポイント
***************************************/
#features {
  background: #fbe9ce;
  padding-bottom: 100px;
}

#features p.img {
  padding: 50px 0 100px 0;
}

.features_title {
  color: #d70a66;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 0.015em;
  padding-bottom: 40px;
}

.features_txt {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 60px;
}

.features_list {
  display: flex;
  justify-content: space-between;
}

.features_item {
  background: #fff;
  padding: 0 20px 20px 20px;
  width: 32%;
}

.features_item:not(:last-child) {
  margin-right: 2%;
}

.features_item_title {
  align-items: flex-end;
  color: #ff738e;
  display: flex;
  font-size: 20px;
}

.features_item_title_txt {
  margin-bottom: 18px;
}

.features_icon {
  align-items: center;
  background: url(../images/features_icon.jpg) center no-repeat;
  color: #fff;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-style: normal;
  height: 69px;
  justify-content: center;
  line-height: 1;
  margin-right: 15px;
  padding: 10px;
  position: relative;
  text-align: center;
  top: -10px;
  width: 59px;
}

.features_num {
  display: block;
  font-size: 34px;
  text-align: center;
}

.features_item_img {
  margin: 5px 0 15px;
}

.features_item_txt {
  font-size: 16px;
  line-height: 2;
  text-align: justify;
}

/***************************************
浮気調査の一般的な費用相場って？
***************************************/
#mp {
  background: #c2eeef;
  padding-bottom: 65px;
}

#mp .wrapper {
  width: 900px;
}

.mp_title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 60px;
}

.mp_img {
  margin-bottom: 40px;
}

.mp_txt {
  font-size: 18px;
  line-height: 2;
}

/***************************************
普通に探偵社に依頼するより遥かにお得！
***************************************/
#deals {
  background: #fdf0b0;
  padding-bottom: 60px;
}

#deals .wrapper {
  width: 900px;
}

.deals_title {
  align-items: center;
  color: #f7720f;
  display: flex;
  font-size: 27px;
  font-weight: bold;
  justify-content: center;
  letter-spacing: 0.015em;
  margin-bottom: 60px;
  position: relative;
  text-align: center;
}

.deals_title:before, .deals_title:after {
  background: #f7720f;
  bottom: 0px;
  content: '';
  display: block;
  height: 4px;
  position: relative;
  width: 55px;
}

.deals_title:before {
  left: 0px;
  transform: rotate(60deg);
}

.deals_title:after {
  right: 0px;
  transform: rotate(-60deg);
}

.deals_img {
  margin: 0 auto 40px;
}

.deals_txt {
  font-size: 18px;
  line-height: 2;
}

/***************************************
プロが必要な理由
***************************************/
#reason {
  padding-bottom: 85px;
}

.reason_title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 60px;
}

.reason_list {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.reason_item {
  width: 300px;
}

.reason_item:not(:last-child) {
  margin-right: 20px;
}

.reason_item_img {
  margin-bottom: 20px;
}

.reason_item_body {
  align-items: center;
  display: flex;
}

.reason_item_icon {
  display: inline-block;
  margin-right: 20px;
  width: 50px;
}

.reason_item_txt {
  color: #d70a66;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
}

.reason_txt {
  font-size: 19px;
  line-height: 2;
  text-align: justify;
}

/* SNSは証拠にならない */
.reason_sns {
  align-items: center;
  background: #21b9cb;
  display: flex;
  justify-content: space-between;
  margin: 80px 0 0;
}

.reason_sns_lawer {
  width: 287px;
}

.reason_sns_inner {
  padding: 28px 50px;
  position: relative;
  width: calc(100% - 287px);
}

.reason_sns_icon {
  display: block;
  position: absolute;
  right: 40px;
  top: -40px;
  width: 136px;
}

.reason_sns_title {
  border-bottom: 1px solid #fff;
  color: #fff;
  font-feature-settings: "palt";
  font-size: 25px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-bottom: 15px;
  padding-bottom: 15px;
  text-align: left;
}

.reason_sns_txt {
  color: #fff;
  font-size: 18px;
  line-height: 1.8;
  text-align: justify;
}

/***************************************
「証拠」が無いとこんなに不利！
***************************************/
#evidence {
  background: #eee;
  padding-bottom: 100px;
  position: relative;
}

#evidence:after {
  background: url(../images/arrow.png) center/contain no-repeat;
  bottom: -30px;
  content: '';
  display: block;
  height: 57px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 101px;
  z-index: 1;
}

.evidence_title {
  font-size: 36px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.evidence_list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

.evidence_item {
  background: #fff;
  padding: 30px 40px;
  width: 32%;
}

.evidence_item:not(:last-child) {
  margin-right: 2%;
}

.evidence_cont_title {
  color: #f35c79;
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.evidence_cont_img {
  margin: 0 auto 30px;
  text-align: center;
  width: 110px;
}

.evidence_cont_caption {
  font-size: 20px;
  line-height: 1.6;
}

.evidence_txt {
  line-height: 2;
}

.evidence_txt_yellow {
  background: linear-gradient(transparent 50%, #fff100 50%);
}

/***************************************
確実な証拠をお約束！
***************************************/
#trial {
  background: #fee4e2;
  padding-bottom: 60px;
}

.trial_title {
  color: #d70a66;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 60px;
}

.trial_img {
  margin-bottom: 60px;
}

.trial_txt {
  font-size: 18px;
  line-height: 2;
}

.trial_list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 60px;
}

.trial_item {
  background: #ff738e;
  color: #fff;
  padding: 15px 20px;
  text-align: center;
  width: 49%;
}

.trial_item:nth-child(n+3) {
  margin-top: 2%;
}

/***************************************
信頼できる探偵社はどこ？
***************************************/
.trust {
  background: #eee;
  padding-bottom: 85px;
}

.trust_title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 60px;
}

.trust_img {
  margin-bottom: 60px;
}

.trust_txt {
  font-size: 18px;
  line-height: 1.8;
}

.trust_list {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

.trust_item {
  background: #e60012;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  padding: 16px 24px;
}

.trust_item:not(:last-child) {
  margin-right: 10px;
}

/***************************************
5つの審査基準をクリアした有料探偵社のみ
***************************************/
#our_detectives {
  background: url(../images/our_detectives_back.jpg) center/cover no-repeat;
  overflow: hidden;
}

#our_detectives h2 {
  margin-top: -90px;
}

#our_detectives .img {
  margin-top: -105px;
}

.our_detectives_txt_box {
  padding: 30px 60px 60px;
}

.our_detectives_txt {
  padding: 0 40px;
}

/***************************************
ご相談数累計
***************************************/
#total {
  background: #fee4e2;
  padding-bottom: 80px;
}

#total .wrapper {
  width: 900px;
}

.total_title {
  color: #d70a66;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 40px;
}

.total_img {
  margin: 40px auto;
}

.total_desc {
  line-height: 2;
  margin: 40px auto 0;
}

/***************************************
メディア
***************************************/
#media {
  background: #f7f5f5;
  padding-bottom: 80px;
}

.media_title {
  font-size: 36px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 15px;
}

.media_desc {
  font-size: 20px;
  line-height: 2;
  margin: 0 0 20px;
}

/***************************************
利用事例
***************************************/
#cases {
  background: #f8d3d0;
  padding-bottom: 95px;
}

.cases_title {
  color: #D70A66;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 80px;
}

.cases_card {
  background: #fff;
  padding: 60px 80px 40px;
}

.cases_card:not(:last-child) {
  margin-bottom: 40px;
}

.cases_card_num {
  margin: 0 auto 40px;
  width: 200px;
}

.cases_card_inner {
  display: flex;
  justify-content: space-between;
}

.cases_card_inner + .cases_card_inner {
  margin-top: 40px;
}

.cases_card_img {
  width: 190px;
}

.cases_txt_box {
  width: calc(100% - 190px);
}

.cases_txt_head {
  border-bottom: 2px solid #eee;
  margin-bottom: 10px;
  padding: 0 20px 10px;
  position: relative;
}

.cases_txt_heading {
  font-feature-settings: "palt";
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: justify;
}

.cases_profile {
  bottom: .8em;
  font-size: 18px;
  position: absolute;
  right: 20px;
}

.cases_txt {
  font-feature-settings: "palt";
  font-size: 18px;
  letter-spacing: 0.02em;
  letter-spacing: -0.03em;
  line-height: 1.8;
  padding: 0 20px;
  text-align: justify;
}

.cases_request {
  border: 10px solid #F6D1D0;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  width: 50%;
}

.cases_request:after {
  border: 13px solid transparent;
  border-left: 13px solid #F6D1D0;
  bottom: 0;
  content: '';
  display: block;
  height: 0;
  margin: auto;
  position: absolute;
  right: -33px;
  top: 0;
  width: 0;
}

.cases_request_name {
  color: #E65195;
  font-size: 18px;
  margin-bottom: 20px;
  text-align: left;
}

.cases_request_txt {
  font-size: 16px;
  letter-spacing: -0.027em;
  line-height: 1.6;
  padding-left: 1em;
  position: relative;
  text-align: justify;
}

.cases_request_txt:before {
  content: '・';
  left: 0;
  position: absolute;
  top: 0;
}

.cases_introduce {
  background: #FE748D;
  border: 10px solid transparent;
  box-sizing: border-box;
  padding: 20px;
  width: 50%;
}

.cases_introduce_name, .cases_introduce_txt {
  color: #fff;
}

.cases_introduce_name {
  font-size: 18px;
  margin-bottom: 20px;
  text-align: left;
}

.cases_introduce_txt {
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
}

#cases p.img {
  padding-top: 35px;
}

/***************************************
サービスの流れ
***************************************/
#flow {
  background: #ff738e;
  padding-bottom: 90px;
}

.flow_title {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  padding-bottom: 75px;
}

.flow_cont {
  display: flex;
  justify-content: space-between;
}

.flow_cont + .flow_cont {
  margin-top: 10px;
}

.flow_free {
  width: 153px;
}

.flow_list {
  width: calc(100% - 173px);
}

.flow_item {
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.flow_item + .flow_item {
  margin-top: 40px;
}

.flow_item_inner {
  width: calc(100% - 390px);
}

.flow_item_title_box {
  align-items: center;
  border-bottom: 2px solid #ff738e;
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.flow_item_title {
  font-feature-settings: "palt";
  font-size: 22px;
  line-height: 1.6;
  text-align: justify;
}

.flow_item_num {
  margin-right: 10px;
  width: 36px;
}

.flow_img {
  margin-right: 20px;
  width: 370px;
}

.flow_txt {
  font-feature-settings: "palt";
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.8;
  text-align: justify;
}

/* 探偵による調査 */
.research_title {
  background: #000;
  color: #fff;
  font-size: 20px;
  margin: 10px 0 45px;
  padding: 25px 0;
  text-align: center;
}

.research_item {
  background: #fff;
  padding: 60px 20px;
  position: relative;
}

.research_item + .research_item {
  margin-top: 40px;
}

.research_item_inner {
  margin: 0 auto;
  width: 760px;
}

.research_handover_icon {
  display: block;
  left: 3px;
  position: absolute;
  top: 5px;
  width: 110px;
}

.research_txt {
  font-size: 16px;
  line-height: 2;
  padding: 0 20px;
  text-align: justify;
}

.research_img {
  margin: 30px 0;
}

.research_img--follow {
  margin: 20px 0;
}

/***************************************
証拠を取るのなら少しでも早めに！
***************************************/
#asap {
  background: url(../images/asap_bg.jpg) center/cover no-repeat;
  padding: 80px 0 120px 0;
}

.asap_box {
  background: rgba(255, 255, 255, 0.62);
  padding: 50px 35px;
}

.asap_title {
  font-size: 36px;
  margin-bottom: 60px;
  text-shadow: 4px 4px 15px #fff;
}

.asap_txt {
  line-height: 1.8;
  text-shadow: 4px 4px 20px #fff;
}

.asap_txt_yellow {
  background: linear-gradient(transparent 65%, #fff100 65%);
}

/***************************************
よくある質問
***************************************/
#faq {
  background: #F8F4F3;
}

#faq .wrapper {
  background: url("../images/faq_img.jpg") right bottom/475px auto no-repeat;
  padding-bottom: 135px;
}

.faq_title {
  color: #f35170;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 75px;
}

.faq_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.faq_item {
  width: 455px;
}

.faq_item:nth-child(n+3) {
  margin-top: 80px;
}

.faq_q_box {
  align-items: center;
  border-bottom: 2px solid #eee;
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.faq_q {
  color: #e03452;
  font-feature-settings: "palt";
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.6;
  text-align: justify;
  width: calc(100% - 75px);
}

.faq_q_icon {
  height: 55px;
  margin-right: 20px;
  width: 55px;
}

.faq_a {
  font-size: 17px;
  line-height: 1.8;
  text-align: justify;
}

/***************************************
Last CTA
***************************************/
#space_contact_last {
  background: #f35c79;
  padding: 80px 0 30px 0;
}

.contact_last_button_box {
  align-items: center;
  background: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  margin: 70px auto 0 auto;
  padding: 30px 50px 25px;
  position: relative;
  width: 100%;
}

.space_button_box .button {
  margin: 0;
  padding: 0;
  transform: scale(1);
  transition: 0.3s;
}

.space_button_box .button:hover {
  transform: scale(1.05);
}

.contact_last_title {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 26px;
  justify-content: center;
  letter-spacing: 0.015em;
  line-height: 2;
  margin-bottom: 60px;
  position: relative;
  text-align: center;
}

.contact_last_title:before, .contact_last_title:after {
  background: #fff;
  bottom: -10px;
  content: '';
  display: block;
  height: 5px;
  position: relative;
  width: 95px;
}

.contact_last_title:before {
  transform: rotate(67deg);
}

.contact_last_title:after {
  transform: rotate(-67deg);
}

.contact_last_title_just {
  display: inline-block;
  margin: 0 -0.4em 0 .2em;
  vertical-align: text-bottom;
  width: 30%;
}

.contact_last_img {
  margin-right: 20px;
  width: 30%;
}

.contact_last_txt {
  font-size: 22px;
  margin: 0 auto 10px;
  text-align: right;
  width: 78%;
}

.fnav {
  font-size: 14px;
  margin-top: 50px;
  padding: 10px 0;
}

footer {
  background: #F8D3D0;
  margin: 0;
  padding: 30px 0;
}

footer p {
  background: #f8d3d0;
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
}