html,body{
  font-family:" ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN"," 游ゴシック ", "YuGothic", " メイリオ ", "Meiryo", sans-serif;
  width: 100%;
  min-width: 1366px;
  margin: 0 auto;
}

/*header*/
header {
  display: flex;
  justify-content: space-between;
  height: 100px;
}
.header-logo {
  margin: 15px;
  width: 20%;
}
.header-logo h1 {
  font-size: 23px;
  color: #0773b9;
  margin: 6px;
  letter-spacing: 0.15em;
}
.header-logo .p1 {
  font-size: 14px;
  color: #3e3f42;
}
.header-logo .p2 {
  font-size: 12px;
  color: #3e3f42;
}

.header-logo-address {
  margin-top: 15px;
  width: 30%;
}
.header-logo-address h4 {
  color: #0773b9;
  border: 1px solid #0773b9;
  width: 30%;
  text-align: center;
  padding: 3px;
}
.header-logo-address p {
  color: #3e3f42;
  font-size: 14px;
  padding: 5px;
  line-height: 1.25em;
}

.header-list {
  width: 50%;
  margin: auto;
  text-align: center;
}
.header-list ul {
  list-style: none;
  display: inline-flex;

}
.header-list ul li {
  border-right: 1px solid #3e3f42;
  transform: skewX(150deg);
}
.header-list ul li a {
  display: block;
  text-decoration: none;
  color: #5e5e5e;
  transform: skewX(-150deg);
  padding: 0 20px;
}
.header-list ul li:last-child {
  border-right: none;
}

.header-tel {
  width: 30%;
  background-color: #0773b9;
  text-align: center;
  padding: 1.2%;
}
.header-tel a {
  color: #fff;
  text-decoration: none;
  font-size: 34px;
}
.header-tel a img {
  padding-right: 10px;
}
.header-tel p {
  color: #fff;
  padding: 3%;
}
.header-res-tel,
.header-res-address {
  border-left: 2px solid #0773b9;
  display: none;
  width: 100px;
  text-align: center;
  line-height: 100px;
}
.header-res-address {
  margin: 0 0 0 auto;
}
.fa-phone-alt,
.fa-map-pin {
  color: #0773b9;
  vertical-align: -16px;
  font-size: 3em;
}
/*　ハンバーガーボタン　*/
.header-res-list {
  width: 100px;
  display: none;
}

/*main*/
.mainimg {
  background-image: url(../images/index.main.png);
  background-repeat: no-repeat;
  background-size: 100%;
  height: 670px;
  position: relative;
}
.mainimg_text {
  position: absolute;
  padding: 16% 0% 0% 10%;
  color: #fff;
  font-size: 56px;
  text-shadow: 3px 3px 1px #0773b9;
  letter-spacing: 0.15em;
  line-height: 1.5em;
}
.line-contact {
  /* LINEできたら削除*/
  position: absolute;
  top: 30px;
  left: 1050px;
  background-image: url(../images/main_line.png);
  background-repeat: no-repeat;
  width: 300px;
  height: 300px;
  text-align: center;
}
.line-contact img {
  padding-top: 30px;
}
.line-contact-text {
  font-size: 26px;
  color: #00ba00;
  padding: 5px;
}
.line-contact-text2 {
  font-size: 12px;
  color: #777;
  display: inline-block;
  text-align: left;
}

.line-contact-res {
  display: none;
  background-color: #00ba00;
  height: 85px;
  text-align: center;
}
.line-res-top {
  width: 60%;
  margin: 0 auto;
}
.line-res-top img {
  float: left;
  padding-left: 0px;
}
.line-res-top p {
  color: #fff;
  font-size: 30px;
  line-height: 60px;
}
.line-contact-res span {
  font-size: 14px;
  color: #fff;
}

/*problem*/
.problem {
  padding: 100px 0px;
  text-align: center;
  background-image: url(../images/problem_back.png);
  background-repeat: no-repeat;
  background-position: 105% 110%;
}
.problem h2 {
  font-size: 48px;
  color: #333;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.problem h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 100px;/*線の長さ*/
  height: 5px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #0773b9;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}
.problem-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}
.problem-contents {
  margin: 20px;
  width: 45%;
  height: 100px;
  background: linear-gradient(to right, #0f86d3 0%, #0773b9 100%);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.problem-contents p {
  font-size: 28px;
  line-height: 1.5em;
  color: #fff;
}

.triangle {
  position: relative;
  background: #fff;
  height: 0px;
}
.triangle::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 70px 100px 0 100px;
  border-color: #fff transparent transparent transparent;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
}

/* research */
.research {
  background: linear-gradient(180deg, #dff2ff 0%, #dff2ff 55%, #fff 50%, #fff 100%);
}
.research-wrap {
  width: 80%;
  margin: 0 auto;
}
.research h2 {
  margin-top: 100px;
  font-size: 48px;
  color: #333;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.research h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 100px;/*線の長さ*/
  height: 5px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #0773b9;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}
.research p {
  margin: 30px 0px;
}

.research-content {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.research-contents {
  background-image: url(../images/research_image.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 25%;
  text-align: center;
  vertical-align: top;
}
.research-contents a {
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  padding-top: 40%;
  display: block;
}
.research-contents a img {
  padding: 20px;
}
.research-contents2 {
  background-image: url(../images/research_image2.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 25%;
  text-align: center;
}
.research-contents2 a {
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  padding-top: 40%;
  display: block;
}
.research-contents2 a img {
  padding: 20px;
}
.research-contents3 {
  background-image: url(../images/research_image3.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 25%;
  text-align: center;
}
.research-contents3 a {
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  padding-top: 40%;
  display: block;
}
.research-contents3 a img {
  padding: 20px;
}
.research-contents4 {
  background-image: url(../images/research_image4.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 25%;
  text-align: center;
}
.research-contents4 a {
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  padding-top: 40%;
  display: block;
}
.research-contents4 a img {
  padding: 20px;
}
.research-contents5 {
  background-image: url(../images/research_image5.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 25%;
  text-align: center;
}
.research-contents5 a {
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  padding-top: 40%;
  display: block;
}
.research-contents5 a img {
  padding: 20px;
}
.research-contents6 {
  background-image: url(../images/research_image6.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 25%;
  text-align: center;
}
.research-contents6 a {
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  padding-top: 40%;
  display: block;
}
.research-contents6 a img {
  padding: 20px;
}
.research-contents7 {
  background-image: url(../images/research_image7.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 25%;
  text-align: center;
}
.research-contents7 a {
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  padding-top: 40%;
  display: block;
}
.research-contents7 a img {
  padding: 20px;
}
.research-contents8 {
  background-image: url(../images/research_image8.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 25%;
  text-align: center;
}
.research-contents8 a {
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  padding-top: 40%;
  display: block;
}
.research-contents8 a img {
  padding: 20px;
}
.research-contents:hover {
  opacity: 0.7;
}
.research-contents2:hover {
  opacity: 0.7;
}
.research-contents3:hover {
  opacity: 0.7;
}
.research-contents4:hover {
  opacity: 0.7;
}
.research-contents5:hover {
  opacity: 0.7;
}
.research-contents6:hover {
  opacity: 0.7;
}
.research-contents7:hover {
  opacity: 0.7;
}
.research-contents8:hover {
  opacity: 0.7;
}
.banner {
  text-align: center;
  padding: 100px 0px 150px 0px;
}

/* contact */
.contact {
  background-image: url(../images/contact_back.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 450px;
  position: relative;
}
.contact h2 {
  margin: 0 auto;
  text-align: center;
  font-size: 36px;
  color: #0773b9;
  background-color: #fff;
  border: 1px solid #0773b9;
  border-radius: 100px;
  width: 40%;
  padding: 15px;
  position: absolute;
  left: 30%;
  top: -8%;
}
.contact p {
  color: #fff;
  text-align: center;
  font-size: 20px;
  padding: 30px;
}
.contact h3 {
  font-size: 36px;
  padding-top: 80px;
  color: #fff;
  text-align: center;
}

.contact_tel_mail {
  margin: 0 auto;
  width: 80%;
  display: flex;
}
.contact_tel {
  width: 50%;
  text-align: center;
  border-right: 2px solid #fff;
}
.contact_tel a {
  font-size: 50px;
  color: #fff;
  text-decoration: none;
}
.contact_tel a:hover {
  opacity: 0.7;
}
.contact_tel a img {
  padding: 0px 10px;
}
.contact_tel span {
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding: 30px 0px;
}
.contact_mail {
  margin: 0 auto;
  width: 50%;
  text-align: center;
}
.contact_mail a {
  color: #0773b9;
  text-decoration: none;
  font-size: 36px;
  background-color: #fff;
  border: 1px solid #0773b9;
  border-radius: 100px;
  padding: 20px 50px;
}
.contact_mail a:hover {
  opacity: 0.7;
}
.contact_mail a img {
  padding: 0px 15px;
}
.contact_mail p {
  margin-bottom: 40px;
}

/* aozora */
/* aozora work */
.aozora {
  margin: 0 auto;
  padding: 150px 0px 80px 0px;
  background: linear-gradient(180deg, #fff 0%, #fff 65%, #dff2ff 50%, #dff2ff 100%);
}
.work {
  width: 90%;
  margin-left: auto;
  text-align: center;
  background-image: url(../images/office_image.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 110% 100%;
}
.work h2 {
  text-align: center;
  font-size: 48px;
  color: #333;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.work h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: inline-block;
  width: 100px;
  height: 5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #0773b9;
  border-radius: 2px;
}
.work_text {
  padding: 50px 0px;
  width: 50%;
  text-align: left;
}
.work_text span {
  color: #333;
  font-size: 30px;
  line-height: 1.5em;
}
.work_text p {
  font-size: 18px;
  color: #333;
  line-height: 1.5em;
}
.work img {
  display: none;
}
/* aozora check*/
.work_check {
  width: 80%;
  margin: 0 auto;
  padding: 100px 0px;
}
.work_check p {
  font-size: 28px;
  color: #333;
  letter-spacing: 0.1em;
}
.work_check p img {
  width: 30px;
  padding-right: 10px;
}
/* aozora service */
.service {
  width: 80%;
  margin: 0 auto;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
}
.service_contents{
  margin: 20px 0px;
  width: 42%;
  border: 2px solid #0773b9;
  padding: 60px 30px;
  background-color: #fff;
  text-align: center;
  position: relative;
}
.service_contents h3 {
  font-size: 22px;
  color: #333;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 40px;
}
.service_contents h3:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: inline-block;
  width: 80px;
  height: 3px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #0773b9;
  border-radius: 2px;
}

.service_contents p {
  display: block;
  text-align: left;
  line-height: 2em;
}
.triangle2 {
  background-color: #red;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 80px solid #0773b9;
  border-bottom: 80px solid transparent;
}

/* price */
.price {
  width: 80%;
  margin: 0 auto;
  padding: 150px 0px;
}
/* price_top */
.price_top {
  text-align: center;
}
.price_top h2 {
  text-align: center;
  font-size: 48px;
  color: #333;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.price_top h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: inline-block;
  width: 100px;
  height: 5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #0773b9;
  border-radius: 2px;
}
.price_top p {
  font-size: 24px;
  line-height: 1.5em;
  padding: 50px;
}
.price_top p span {
  color: red;
  background: linear-gradient(transparent 60%, #ffff66 60%);
}
/* price_bottom */
.price_bottom {
  margin: 0 auto;
  justify-content: space-between;
  display: flex;
  border: 15px solid #dff2ff;
}
.price_bottom_top {
  display: none;
}
.price_bottom_left {
  padding: 30px;
}
.price_bottom_left h3 {
  color: #0773b9;
  font-size: 28px;
}
.price_bottom_left p {
  font-size: 18px;
  color: #333;
  line-height: 2em;
  padding-top: 15px;
}
.price_bottom_right {
  width: 50%;
}
.price_bottom_right img {
  width: 95%;
  padding: 50px 0px;
}
.sistem {
  color: red;
}
.card {
  color: #ababab;
  font-size: 14px;
}

/* access */
.access {
  display: table;
  padding: 100px 0px;
  width: 80%;
  height: 650px;
  margin: 0 auto;
  text-align: center;
}
.access h2 {
  text-align: center;
  font-size: 48px;
  color: #333;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.access h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: inline-block;
  width: 100px;
  height: 5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #0773b9;
  border-radius: 2px;
}
.access_content {
  display: flex;
  margin: 100px 0px;
}
.access_info {
  margin: 0px;
  text-align: left;
  width: 50%;
  height: 420px;
  background-color: #dff2ff;
}
.access_info h3 {
  width: 90%;
  margin: 30px auto;
  padding-bottom: 20px;
  font-size: 24px;
  color: #333;
  border-bottom: 2px solid #0773b9;
}
.access_info strong {
  color: #0773b9;
  font-size: 20px;
}
.access_info p {
  width: 90%;
  margin: 0 auto;
  padding: 10px 0px;
}
.access_info_hp a {
  margin-left: 10%;
  color: #0773b9;
}
table {
  width: 90%;
  margin: 30px auto;
}
table th {
  padding: 15px 0px;
  text-align: center;
  color: #0773b9;
  background-color: #b7dffb;
  border-bottom: 1px solid #dff2ff;
  border-right: 3px solid #dff2ff;
}
table td {
  padding: 15px 0px 15px 10px;
  color: #333;
  background-color: #fff;
  border-bottom: 1px solid #dff2ff;
}
table td a {
  text-decoration: none;
  color: #333;
}


.accsse_map {
  width: 50%;
}

 /* column */
 .column {
  width: 80%;
  margin: 0 auto;
  text-align: center;
 }
.column h2 {
  font-size: 28px;
  color: #333;
  padding: 30px 0px;
}
.column p {
  display: block;
  text-align: left;
  color: #333;
  line-height: 1.8em;
}
.column_btn {
  padding-bottom: 100px;
}
.column_btn a {
  display: inline-block;
  margin: 50px auto;
  width: 30%;
  background-color: #0773b9;
  color: #fff;
  border-radius: 100px;
  font-size: 30px;
  text-decoration: none;
  padding: 30px;
}
.column_btn a:hover {
  opacity: 0.7;
}
.column_btn img {
  float: right;
  padding-top: 5px;
}

/* footer */
footer {
  background-color: #0773b9;
}
.footer_list {
  width: 80%;
  margin: 0 auto;
  border-bottom: 2px solid #fff;
  text-align: center;
  padding: 50px 0px;
}
.footer_list ul {
  width: 100%;
  justify-content: space-between;
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
}
.footer_list ul li {
  margin: 6px 0px;
}
.footer_list ul li a {
  text-decoration: none;
  color: #fff;
}
.footer_list ul li a img {
  width: 20px;
  padding-bottom: 5px;
}
.footer_content {
  width: 80%;
  margin: 0 auto;
  justify-content: space-between;
  display: flex;
  padding: 30px 0px;
}
.footer_logo{
  width: 18%;
  color: #fff;
}
.footer_logo .p1 {
  font-size: 14px;
}
.footer_logo h1 {
  font-size: 32px;
  letter-spacing: 0.15em;
  padding: 8px 0px;
}
.footer_logo .p2 {
  font-size: 12px;
  letter-spacing: 0.1em;
}
.footer_access p {
  color: #fff;
  line-height: 2em;
}
.footer_tel p {
  color: #fff;
  line-height: 2em;
}
.footer_tel a {
  text-decoration: none;
  color: #fff;
}
.footer_line {
  width: 25%;
  background-color: #fff;
  border: 3px solid #00ba00;
  padding: 10px;
  display: flex;/* LINEできたらflexにする*/
}
.footer_line img {
  margin: 0px 5px;
  width: 18%;
}
.footer_line p span {
  font-size: 14px;
}
.footer_line p {
  color: #333;
  font-size: 10px;
}
.copy p {
  padding: 30px 0px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  background-color: #00558c;
  margin-bottom: 120px;
}
/* footer_fixed */
.footer_fixed {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0;
  width: 100%;
  min-width: 1366px;
}
.fixed_tel {
  width: 33.3%;/* LINEできたら33.3にする*/
  background-color: #0773b9;
  text-align: center;
  padding: 15px;
  color: #fff;
}
.fixed_tel a {
  color: #fff;
  text-decoration: none;
  font-size: 36px;
}
.fixed_tel a img {
  padding-right: 10px;
}
.fixed_tel_time {
  font-size: 16px;
  padding: 10px 0px;
}
.fixed_tel_access {
  font-size: 12px;
}
.fixed_tel_access span {
  border: 1px solid #fff;
  padding: 3px;
  margin-right: 5px;
}
.fixed_contact {
  padding-top: 10px;
  font-size: 10px;
}
.fixed_contact{
  width: 33.3%;/* LINEできたら33.3にする*/
  background-color: #00558c;
  text-align: center;
  padding: 40px 0px;
  color: #fff;
}
.fixed_contact a img {
  padding-right: 15px;

}
.fixed_contact a {
  color: #fff;
  text-decoration: none;
  font-size: 36px;
}
.fixed_line {
  /* LINEできたら削除する*/
  width: 33.3333333%;
  background-color: #00ba00;
  text-align: center;
  padding: 30px;
  color: #fff;
}
.fixed_line p span {
  font-size: 24px;
}
.fixed_line p {
  font-size: 8px;
  padding-top: 10px;
}

.fixed_tel_res,
.fixed_contact_res,
.fixed_line_res {
  display: none;
}

/* 下層ページ */
/* 不倫・浮気 */
.uwakiimg_2 {
  background-image: url(../images/uwakiimg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  border-top: 1px solid #fff;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img_text h2 {
  color: #fff;
  font-size: 34px;
  line-height: 1.5em;
}
.hurin_toptext {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: #0773b9;
  line-height: 2em;
  font-size: 20px;
  padding: 50px 0px;
}
.about {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 80px;
  border: 3px solid #0773b9;
}
.about h3 {
  color: #fff;
  font-size: 24px;
  background-color: #0773b9;
  padding: 20px;
  text-align: center;
}
.about_text ul {
  padding: 0px 15px;
}
.about_text li {
  color: #333;
  list-style: none;
  padding: 10px 0px;
  line-height: 1.5em;
  font-size: 20px;
}
.blue {
  color: #0773b9;
  font-size: 22px;
}
.red {
  color: red;
}
.about_text li::before {
  position: relative;
  top: -2px;
  left: -8px;

  display: inline-block;

  width: 14px;
  height: 14px;

  content: '';

  border-radius: 100%;
  background: #0773b9;
}
.about_text2 {
  background-color: #dff2ff;
  padding: 20px;
  margin: 0px 30px 30px 30px;
}
.about_text2 h3 {
  text-align: left;
  background-color: #dff2ff;
  color: #0773b9;
  font-size: 22px;
  border-bottom: 2px solid #0773b9;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.about_text2 p {
  font-size: 20px;
  color: #333;
  line-height: 1.8em;
}

/* 離婚問題 */
.rikonimg_2 {
  background-image: url(../images/rikonimg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  border-top: 1px solid #fff;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about_contents {
  padding: 30px;
  color: #333;
}
.about_contents h4 {
  font-size: 22px;
  color: #0773b9;
  border-bottom: 2px solid #0773b9;
  padding: 20px;
  margin-bottom: 15px;
}
.about_contents p {
  line-height: 1.5em;
  font-size: 20px;
  padding: 10px 0px 25px 0px;
}
.about_contents ol {
  padding: 30px 0px 0px 0px;
  counter-reset: my-counter;

}
.about_contents ol li {
  list-style: none;
  padding: 10px 0px 10px 30px;
  line-height: 1.5em;
  font-size: 20px;
}
.about_contents ol li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #0773b9;
  color: #fff;
  display: block;
  float: left;
  line-height: 22px;
  margin-left: -30px;
  text-align: center;
  height: 25px;
  width: 25px;
  border-radius: 50%;
}
.sikaku {
  border: 1px solid #0773b9;
  padding: 5px 15px;
  margin-bottom: 5px;
  display: inline-block;
}

/* 尾行 */
.bikouimg_2 {
  background-image: url(../images/bikouimg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  border-top: 1px solid #fff;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 盗聴器 */
.toutyoukiimg_2 {
  background-image: url(../images/toutyoukiimg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  border-top: 1px solid #fff;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 証拠写真 */
.syoukoimg_2 {
  background-image: url(../images/syoukoimg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  border-top: 1px solid #fff;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ストーカー */
.suto-ka-img_2 {
  background-image: url(../images/suto-ka-img.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  border-top: 1px solid #fff;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 悪質探偵 */
.akusituimg_2 {
  background-image: url(../images/akusituimg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  border-top: 1px solid #fff;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* いじめ */
.ijimeimg_2 {
  background-image: url(../images/ijimeimg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  border-top: 1px solid #fff;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* コラム一覧 */
.columnimg_2 {
  background-image: url(../images/columnimg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  border-top: 1px solid #fff;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.column_toptext {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: #0773b9;
  line-height: 2em;
  font-size: 20px;
  padding: 50px 0px;
}
.about_text li a {
  color: #333;
}
.about_text li a:hover {
  color: red;
}

/* コラム */
.contents {
  width: 30%;
  margin: 50px auto;
  text-align: center;
  border: 2px solid #0773b9;
  padding: 30px;
}
.contents h4 {
  font-size: 26px;
  color: #0773b9;
  padding-bottom: 10px;
}
.content, .about_text {
  text-align: left;
}
.about_text3 {
  background-color: #dff2ff;
  padding: 20px;
  margin: 0 auto;
  width: 70%;
  font-size: 20px;
  line-height: 1.5em;
  margin-bottom: 80px;
}


/* パンくずリスト */
.bread {
  width: 80%;
  margin: 0 auto;
  padding: 30px 0px;
  text-align: right;
}
.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #0773b9;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
}


/* header（デモの参考値） */
.demobox-header{
background: #0773b9;
width: 100px;
display: none;
}
/* headerのサイト名（デモの参考値） */
.demobox-sitename{
font-weight: 700;
font-size: 18px;
}
/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* inputを非表示 */
.input-hidden{
	display: none;
}
	/* label */
.hamburger-demo-switch{
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 9999;
  width: 60px;
  height: 60px;
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo1:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* ハンバーガーアイコン */
.hamburger-switch-line1, .hamburger-switch-line1:before, .hamburger-switch-line1:after{
	width: 40px;
	height: 5px;
	background: #fff; /* ハンバーガーアイコンの色 */
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .3s;
	content: "";
}
.hamburger-switch-line1{
	transform: translate(-50%, -50%);
}
.hamburger-switch-line1:before{
	transform: translate(-50%, -300%);
}
.hamburger-switch-line1:after{
	transform: translate(-50%, 200%);
}
/* ハンバーガーアイコン･アニメーション */
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1{
	width: 0;
}
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:before{
	transform: rotate(45deg) translate(-40%, 325%);
}
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:after{
	transform: rotate(-45deg) translate(-40%, -325%);
}
/* メニューエリア */
.hamburger-demo-menuwrap{
	position: fixed;
	height: 100%;
	background: #0773b9; /* メニューエリアの背景色 */
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
	top: 0;
	left: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !important不要な場合もあり */
	list-style: none;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #fff; /* メニューリストの文字色 */
  font-size: 30px;
	display: block;
	padding: 1em 0;
}
/* メニューエリア･アニメーション */
	/* 右から */
#hamburger-demo1:checked ~ .hamburger-demo-menuwrap{
	left: 30%;
}
	/* コンテンツカバー */
#hamburger-demo1:checked ~ .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}


/*ステップフローのCSS*/
ul.stepflow {
	border: none;
	margin: 1em 0.5em;
	padding: 0;
	list-style: none;
}
ul.stepflow > li:before, ol.stepflow > li:before {
	background-color:#cccccc!important;
}
.stepflow li {
    position: relative;
    padding: 0 0 0.2em 1.8em;
}
.stepflow>li:before {
	content: "";
	width: 3px;
	background: #cccccc;
	display: block;
	position: absolute;
	top: 28px;
	bottom: 0;
	left: 5px;
}
.stepflow-white {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: solid 3px #232F3E;
}
.stepflow-black {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: solid 3px #232F3E;
	background-color: #232F3E;
}
.stepflow_label {
	padding: 3px 0px 8px 0px;
	margin-bottom:8px;
	color: #999999;
	font-size: .8em;
	font-weight: bold;
}
.stepflow_title {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom:15px;
}
.stepflow_content {
	font-size: .9em;
	line-height: 1.5;
	margin-top: .5em;
	padding: 0 0 1.5em;
	border-bottom: dashed 1px #cccccc;
}
/*ステップフローのCSSここまで*/

.top-seo-contents {
  padding: 0 0 100px;
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.top-seo-contents h2 {
  font-size: 48px;
  color: #333;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 60px;
  margin-top: 80px;
}

.top-seo-contents h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: inline-block;
  width: 100px;
  height: 5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #0773b9;
  border-radius: 2px;
}

.top-seo-contents h3 {
  margin-top: 70px;
  margin-bottom: 20px;
  color: #0773b9;
  font-size: 28px;
  text-align: left;
}

.top-seo-contents p {
  margin-bottom: 30px;
  text-align: left;
  line-height: 1.8em;
}