@charset "UTF-8";

.service-video{
	display:none;
}
#area-main-content{
	line-height:160%;
	font-size:140%;
	text-align:left;
	margin:1em 0 2em;
}

#area-main-content *{
	margin:0.5em 0em;
}

#area-main-content ul{
	margin:1em 2em;
}

#area-main-content li{	
	list-style:disc !important;
}

#area-main-content{
	
}

html {
  font-size:62.5%;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #212121;
  min-width: 1080px;
}

@media screen and (max-width: 320px){
  body {
      min-width: initial;
    }
  }

/* --------------------------------
  Header
-------------------------------- */

#global__header {
  width: 100%;
  height: 130px;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 99;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dbdbdb;
  height: 80px;
}

.header__logo {
  padding-left: 4rem;
}


.header__btn {
  display: flex;
  padding-right: 4rem;
}

.tel {
  display: flex;
  align-items: center;
  padding-right: 2.4rem;
}

.tel__icon {
  padding-right: 4px;
}

.tel__text {
  text-align: left;
}

.tel__text--number{
  color: #0fa566;
  -webkit-text-fill-color: #0fa566;
  font-size: 2.5rem;
  font-weight: bold;
}

.contact-btn {
  background-color: #003071;
  display: inline-block;
  color: #fff;
  font-size: 1.4rem;
  padding: 1.5rem 1.6rem;
  border-radius: 5px;
  margin-right: 1.6rem;
	display: flex;
        align-items: center;
        justify-content: center;
}

.btn:hover{
  opacity: 0.9;
}

.line-btn {
  background-color: #15be00;
  display: inline-block;
  color: #fff;
  font-size: 1.4rem;
  padding: 1.5rem 1.6rem;
  border-radius: 5px;
display: flex;
        align-items: center;
        justify-content: center;
}

nav {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 4rem;
}

.navigation-list {
  display: flex !important;
  justify-content: space-between !important;
  padding: 1.8rem 0;
}

.navigation-list li {
  font-size: 1.3rem;
  font-weight: bold;
}

.navigation-list li :hover{
  color: #0fa566;
  transition: all 0.3s ease 0s;
}

/* --------------------------------
  Main View
-------------------------------- */

.mainview {
  padding-top: 100px;
  width: 100%;
}

.mainview__img {
  background-image: url('https://tantei.fukuoka.jp/wp-content/uploads/2025/02/tantei-header1.png');
  background-repeat: no-repeat;
  background-position:bottom center;
  background-size:cover;
  height:500px;
	text-indent:-9999px;
}

/* --------------------------------
  All
-------------------------------- */

.inner {
  max-width: 940px;
  width: 100%;  
  margin: 0 auto;
  padding: 0 1.6rem;
  overflow: hidden;
}

.btn__area {
  text-align: center;
}

.main-btn {
  background-color: #0fa566;
  display: inline-block;
  color: #fff;
  font-size: 1.8rem;
  border-radius: 5px;
  padding: 2rem 4rem;
}

/* --------------------------------
  Reason
-------------------------------- */

.reason {
  padding: 10rem 0 0 0;
}

.reason__ttl {
  font-size: 3.6rem;
  line-height: 1.2;
  text-align: center;
  padding-bottom: 3.2rem;
}

.reason__ttl--green {
  color: #0fa566;
  font-size: 5.6rem;
}

.reason__caption {
  text-align: center;
  font-size: 1.8rem;
}

.reason__card-area {
  display: flex;
  justify-content: space-between;
  padding: 6rem 0;
}

.reason__card {
  width: 100%;
  max-width: 300px;
  height: auto;
  background-color: #fafafa;
  text-align: center;
  padding: 3.2rem 1.6rem;
  box-sizing: border-box;
}

.reason__card img{
  width: 80px;
}

.reason__card-subttl {
  font-size: 1.8rem;
  font-weight: bold;
  padding-top: 3.6rem;
}

.reason__card-ttl--01 {
  font-size: 2.8rem;
  font-weight: bold;
  color: #0fa566;
  padding: 1.6rem 0;
}

.reason__card-ttl--02 {
  font-size: 2.8rem;
  font-weight: bold;
  color: #bea800;
  padding: 1.6rem 0;
}

.reason__card-ttl--03 {
  font-size: 2.8rem;
  font-weight: bold;
  color: #008bbe;
  padding: 1.6rem 0;
}

.reason__card-caption {
  font-size: 1.4rem;
  /* width: 268px; */
  text-align: left;
  margin: 0 auto;
  line-height: 1.5;
}

/* --------------------------------
  Video
-------------------------------- */

.video {
  padding: 10rem 0;
	display:none;
}

.video__ttl {
  font-size: 3rem;
  text-align: center;
  padding-bottom: 3.2rem;
}

.video__card-area {
  display: flex;
  justify-content: space-between;
  padding-top: 6rem;
}

.video__card {
  width: 300px;
}

.video__card-ttl {
  font-size: 1.8rem;
  font-weight: bold;
  border-left: solid 3px #0fa566;
  padding: 8px 0 8px 16px;
}

.video__card-content {
  padding-top: 3.2rem;
}

/* --------------------------------
  Service
-------------------------------- */

.service {
  padding: 8rem 0;
  background-color: #e7f6f0;
}

.service__ttl {
  font-size: 3rem;
  line-height: 1.2;
  border-left: solid 3px #0fa566;
  padding-left: 1.6rem;
}

.service__ttl--green {
  color: #0fa566;
  font-size: 2rem;
}

.service__card-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 8rem 0 6rem 0;
}

.service__card {
  width: 300px;
  height: 535px;
  background-color: #fff;
  margin-bottom: 2rem;
  position: relative;
  transition: all 0.3s ease 0s;
}

.service__card:hover{
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.16);
  transform: translateY(-1.1875em);
}

.service__card img {
  padding: 1.6rem;
  width: 268px;
}

.service__card-ttl {
  font-size: 1.8rem;
  font-weight: bold;
  padding-left: 1.6rem;
}

.service__card-caption {
  font-size: 1.4rem;
  width: 268px;
  padding: 1rem 1.6rem;
  line-height: 1.5;
}

.service__card-days {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 0.9rem 1.6rem;
  margin-left: 1.6rem;
  background-color: #f7f6f0;
  display: inline-block;
  position: absolute;
  bottom: 10.9rem;
}

.service__card-price {
  font-size: 1.8rem;
  font-weight: bold;
  padding-left: 1.6rem;
  position: absolute;
  bottom: 7.4rem;
}

.service__card-price-red {
  color: #d80000;
  font-size: 1.8rem;
}

/* .service-btn {
  background-color: #0fa566;
  display: inline-block;
  color: #fff;
  font-size: 1.6rem;
  border-radius: 5px;
  padding: 1.3rem 7.8rem;
  margin: 0 1.6rem 1.6rem 1.6rem;
  position: absolute;
  bottom: 0;
} */

.service-btn {
  background-color: #0fa566;
  display: inline-block;
  color: #fff;
  font-size: 1.6rem;
  border-radius: 5px;
  width: 268px;
  height: 42px;
  text-align: center;
  line-height: 42px;
  margin: 0 1.6rem 1.6rem 1.6rem;
  position: absolute;
  bottom: 0;
}

.attention {
  background-color: #fff;
  padding: 4.3rem 13rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
}

.attention__left-ttl {
  font-size: 2.4rem;
  font-weight: bold;
  color: #0fa566;
  line-height: 1.2;
  border-left: solid 3px #0fa566;
  padding: 0 0 0 1.6rem;
}

.attention__left ul {
  padding-top: 2.4rem;
}

.attention__left li {
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: bold;
}

/* --------------------------------
  Voice
-------------------------------- */

.voice {
  padding: 8rem;
  background-color: #fafafa;
}

.voice__card-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 8rem 0 6rem 0;
}

.voice__card {
  width: 23.5%;
  height: auto;
  background-color: #fff;
  margin-bottom: 2rem;
  padding-bottom: 1.6rem;
  transition: all 0.3s ease 0s;
}

.voice__image {
  position: relative;
  display: block;
}

.voice__card img {
  width: 100%;
  height: 147px;
  object-fit: cover;
}

.voice__card:hover{
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.16);
  transform: translateY(-1.1875em);
}

.voice__card-label {
  font-size: 1.3rem;
  color: #fff;
  padding: 1rem 1.6rem;
  background-color: #693f24;
  display: inline-block;
  position: absolute;
  top: 114px;
}

.voice__card-ttl {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: bold;
  padding:1.6rem 1.6rem 0.4rem 1.6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.voice__card-name {
  font-size: 1.4rem;
  padding:0 1.6rem;
}

/* --------------------------------
  Detective information
-------------------------------- */

.detective {
  padding: 8rem;
  background-color: #fff;
}

.detective__card-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 8rem 0 6rem 0;
}

.detective__card {
  width: 23.5%;
  height: auto;
  background-color: #fafafa;
  margin-bottom: 2rem;
  position: relative;
  transition: all 0.3s ease 0s;
  padding-bottom: 1.6rem;
}

.detective__card img {
  width: 100%;
  height: 147px;
  object-fit: cover;
}

.detective__card:hover{
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.16);
  transform: translateY(-1.1875em);
}

.detective__card-ttl {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: bold;
  padding:1.6rem 1.6rem 0 1.6rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --------------------------------
  News
-------------------------------- */

.news {
  padding: 8rem;
  background-color: #fafafa;
}

.news__area {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  padding-top: 8rem;
}

.news__area li {
  font-size: 1.6rem;
  padding-bottom: 2rem;
  border-bottom: solid 1px #dbdbdb;
  margin-bottom: 2rem;
  line-height: 1.3;
}

.news__days {
  font-size: 1.4rem;
  padding-right: 1.6rem;
}

.news__left {
  padding-right: 4rem;
  width: 100%;
}


/* --------------------------------
  Information
-------------------------------- */

.information {
  padding-top: 8rem;
}

.information__ttl {
  font-size: 3rem;
  text-align: center;
  padding-bottom: 3rem;
  color: #0fa566;
}

.information__caption {
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.6;
  padding-bottom: 6rem;
}

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

.information__left {
  background-color: #0fa566;
  width: 50%;
  height: 578px;
  text-align: right;  
}

.information__left img {
  width: 470px;
}

.information__right {
  background-color: #fafafa;
  width: 50%;
  height: 578px;
  display: flex;
  align-items: center;
}

.information__right-inner {
  padding-left:4rem;
}

.information__right-ttl {
  font-size: 1.8rem;
  font-weight: bold;
  padding-bottom: 1.6rem;
}

.information__right-txt {
  line-height: 1.6;
  font-size: 1.4rem;
}

/* --------------------------------
  Instagram
-------------------------------- */

.instagram {
  padding: 8rem;
  background-color: #fff;
}

.instagram__ttl {
  font-size: 3rem;
  text-align: center;
  color: #212121;
}

.instagram__card-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 8rem;
}

/* --------------------------------
  Footer
-------------------------------- */

#global__footer {
  background-color:#e7f6f0;
  padding-top: 6rem;
}

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

.footer__navi {
  width: 33%;
  max-width: 260px;
}

.footer__navi-ttl {
  font-size: 1.6rem;
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: solid 1px #212121;
}

.footer__navi li {
  font-size: 1.3rem;
  line-height: 1.8;
}

.footer__navi--2column {
  float: left;
  padding-right: 1.6rem;
}

.footer__bottom {
  background-color: #fff;
  width: 100%;
  text-align: center;
  padding-top: 7rem;
  margin-top: 6rem;
}

.footer__bottom-info li{
  padding: 1.6rem;
  display: inline-block;
  font-size: 1.3rem;
}

.copyright {
  background-color: #0fa566;
  color: #fff;
  padding: 1.3rem 0;
  margin-top: 7rem;
  text-align: center;
  width: 100%;
}

.copyright p{
  font-size: 1.2rem;
} 


/* --------------------------------
  Area Page
-------------------------------- */

.area {
  padding: 8rem 0;
}

.area__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 4rem 1rem 4rem;
  box-sizing: border-box;
}

.area__head-txt {
  max-width: 50%;
}

.area__head-ttl {
  font-size: 3.5rem;
  font-weight: normal;
  line-height: 1.3;
  padding-top: 0.8rem;
  color: #212121;
}

.area__head-ttl--green {
  font-size: 2.6rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #0fa566;
  letter-spacing: 2px;
  display: block;
}

.area__head-caption {
  font-size: 1.6rem;
  line-height: 1.7;
  padding: 1.6rem 0;
}

.area__head-sub-ttl {
  font-size: 1.8rem;
}

.area__head-img {
  padding-left: 1rem;
	width:50%;
	max-width:500px;
}

.area__head-img img{
  width: 100%;
  height: 450px;
  object-fit: cover;
}

.area__content {
  background: linear-gradient(#2a694e 70%, #fff 30%);
  padding-top: 6rem;
  text-align: center;
}

.area__content-ttl {
  font-size: 3.2rem;
  color: #fff;
  line-height: 1.5;
}

.area__content-inner {
  padding: 6rem 5rem;
  margin-top: 6rem;
  margin-bottom: 6rem;
  background-color: #fff;
  box-shadow: 5px 5px 10px 0 rgb(0 0 0 / 16%);
}

.area__card-area {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5rem;
}

.area__card {
  width: 33%;
  max-width: 260px;
  text-align: center;
}

.area__card-caption {
  background-color: #693f24;
  font-size: 1.6rem;
  color: #fff;
  padding: 1.6rem 0;

}

.area__card img{
  padding-top: 16px;
  width: 100%;
}

.area__content-copy {
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.5;
  padding-bottom: 5rem;
}

.area__content-copy--green {
  color: #0fa566;
}

.area__topic {
  background-color: #e7f6f0;
  margin-bottom: 1.6rem;
  padding: 2.4rem 7rem;
  display: flex;
  /*align-items: center;*/
}

.check {
  width: 83px;
  padding-right: 3.2rem;
}

.area__topic-txt {
  font-size: 1.8rem;
  text-align: left;
  line-height: 1.5;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 35px 0 35px;
  border-color: #2a694e transparent transparent transparent;
  position: relative;
  top: 100px;
}

.area__btn {
  padding-top: 1.6rem;
	margin-bottom:5em;
}

.contact-btn__area {
  background-color: #003071;
  display: inline-block;
  color: #fff;
  font-size: 2.4rem;
  padding: 2rem 4rem;
  border-radius: 5px;
  margin-right: 1.6rem;
}

.line-btn__area {
  background-color: #15be00;
  display: inline-block;
  color: #fff;
  font-size: 2.4rem;
  padding: 2rem 4rem;
  border-radius: 5px;
}

.area__img {
  background-image: url('../img/area-img.jpg');
  background-repeat: no-repeat;
  background-position:center;
  background-size:cover;
  height: 400px;
  margin-bottom: 5rem;
}


/* --------------------------------
  Sidebar
-------------------------------- */

#sidebar {
  width: 230px;
  margin-left: 4rem;
}

#sidebar .sidebar__ttl {
  font-size: 1.8rem;
  font-weight: bold;
}

#sidebar .sidebar__list {
  padding-top: 2.4rem;
  line-height: 2.4;
  font-size: 1.6rem;
}

#sidebar .sidebar__list span{
  color: #212121;
  position: relative;
  padding-right: 1.6rem;
}

#sidebar .sidebar__list :hover{
  color: #0fa566;
  transition: all 0.3s ease 0s;
}

#sidebar .sidebar__list span::before{
  content: "";
  position: relative;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid #bcbcbc;
  border-right: 2px solid #bcbcbc;
  transform: rotate(45deg);
  margin-top: 15px;
  float: right;
}

#sidebar .sidebar__bnr {
  text-align: center;
}

#sidebar .sidebar__bnr img{
  padding-top: 3rem;
}

#sidebar .sidebar__bnr p{
  line-height: 1.5;
}

#sidebar .sidebar__bnr-txt{
  font-size: 1.1rem;
  line-height: 1.5;
  padding-top: 1.6rem;
}


/* --------------------------------
  Underpage
-------------------------------- */

.underpage {
  padding-top: 18rem;
}

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

.underpage__ttl {   
  background-color: #0fa566;
  padding: 1.3rem 1.6rem;
}

.underpage__ttl h1{   
  font-size: 2.4rem;
  line-height: 1.2;
  border-left: solid 3px #fff;
  color: #fff;
  padding-left: 1.6rem;
}

.underpage__image {
  padding: 2.4rem 0;
}



.footer-office{
	min-width:1040px;
background:#FCF8EF !important;
	margin:0 0 0;
	text-align:center !important;
	font-size:110% !important;
	line-height:150% !important;
}

.footer-office td{
	padding:0 0 3em;
}

.footer-office td:hover{
	background:#ffffff !important;
}

.footer-office h3{
	background:none;
	border:none;
	margin:2em 0 1em;
	text-align:center;
}

.footer-office strong{
	display:block;
	font-size:110%;
	color:#333333;
	font-weight:normal
	border:1px solid #333333;
	padding:10px;
	width:50%;
	margin:1em auto 2em;
}
.fc-area{
	font-size:80%;
	font-weight:normal;
}
.footer-office p{
	font-size:80%;
	line-height:120%;
}


.ng-left{
	width:400px;
	float:left;
}

.ng-right{
	width:600px;
	float:right;
}

.research-ng{
	font-size:80%;
	min-height:400px;
	border:1px solid #888888;
	border-radius:5px;
	background:#ffffff;
}

.reserch-ng p{
	margin:1em;
	line-height:110%;
}
.research-ng h3{
  margin:0;
	text-align:center;
  font-size:100%;
  border:none;
	background:#888888;
	color:#ffffff;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}



.research-ng ul{
  margin:0 2em;
  padding:10px 15px 0;
}


.related-box{
  border:1px solid #EDF8FF;
  background:#EDF8FF;
  border-radius:10px;
}

.related-box h3{
  margin:0;
  background:#0099CC !important;
  color:#ffffff;
  font-size:100%;
	padding-left:30px;
	border-left:none;
  border-top-left-radius:10px;
border-top-right-radius:10px;	
}


.tel-list h2{
	font-size:120%;
	padding:10px;
	border:none;
	
}

.tel-list ul{
	overflow:hidden;
	margin:0;
}

.tel-list ul li{
	float:left;
	width:185px;
	background:#ffffff;
	padding:15px 0;
	text-align:center;
	font-size:80%;
	margin:10px 10px;
	list-style:none;
}

.tel-list ul li strong{
  color:#0066ff;	
}