@charset "UTF-8";

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  background: url(../img/bg.svg);
  background-size: contain;
  background-repeat: repeat;
}

img {
  width: -webkit-fill-available;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  /* Safari, Chrome */
  image-rendering: optimizeQuality;
  width: -moz-available;
  pointer-events: none;
  width: 100%;
}

a {
  transition: .3s;
  display: block;
}

a:hover {
  opacity: .7;
  transition: .3s;
  cursor: pointer;
}

.fade {
  opacity: 0;
}

.fade-in {
  opacity: 1;
  transition: all 2s;
}

.ttl {
  color: #E61F21;
  font-weight: bold;
  border-bottom: 5px solid #E61F21;
  width: max-content;
  font-size: clamp(0.1rem, 3.75vw, 7.2rem);
}

@media screen and (max-width: 767px) {
  .ttl {
    font-size: clamp(0.1rem, 6.1vw, 2.4rem);
    border-bottom: 2px solid #E61F21;
  }
}

.txt {
  font-size: clamp(0.1rem, 1.66666vw, 3.2rem);
}

.check .txt {
  font-size: clamp(0.1rem, 1.77083vw, 3.4rem);
}

@media screen and (max-width: 767px) {
  .txt {
    font-size: clamp(0.1rem, 4.1vw, 1.6rem);
  }

  .check .txt {
  font-size: clamp(0.1rem, 4.6vw, 1.8rem);
}
}

.ttl+.txt {
  margin-top: 4%;
}

.img {
  margin-top: 5%;
}

.sub_txt {
  font-size: clamp(0.1rem, 1.979vw, 3.8rem);
  font-weight: bold;
  text-align: center;
  margin-top: 2%;
}

.sub_txt span {
  font-size: clamp(0.1rem, 2.29166vw, 4.4rem);
}

@media screen and (max-width: 767px) {
  .sub_txt {
    font-size: clamp(0.1rem, 5.1vw, 2rem);
  }

  .sub_txt span {
    font-size: clamp(0.1rem, 5.5vw, 2.2rem);
}
}

.check {
  margin-top: 5%;
}

.check li {
  display: flex;
  gap: 3%;
}

@media screen and (max-width: 767px) {
  .check li {
    align-items: baseline;
  }
}

.check li+li {
  margin-top: 3%;
}

.check li p {
  width: 92%;
}

.check li p span {
  border-bottom: 1px solid;
}

.check-icon {
  width: 4.637%;
}

.arrow {
  width: 22.7278%;
  margin: 4% auto 0;
}

@media screen and (max-width: 767px) {
  .arrow {
    width: 35%;
  }
}

header,
footer {
  color: #000000;
  display: flex;
  align-items: center;
  font-weight: bold;
  padding: 2% 7% 0;
}

header {
  font-size: clamp(0.1rem, 2.1875vw, 4.2rem);
}

@media screen and (max-width: 767px) {
  header {
    font-size: clamp(0.1rem, 5.1vw, 2rem);
    padding: 2% 20px;
  }
}

header span {
  font-size: clamp(0.1rem, 1.66666vw, 3.2rem);
}

@media screen and (max-width: 767px) {
  header span {
    font-size: clamp(0.1rem, 3vw, 1.2rem);
  }
}

.header_link {
  position: absolute;
  width: 18.073%;
  top: 5%;
  right: 2%;
}

@media screen and (max-width: 767px) {
  .header_link {
    display: none;
  }
}

.header_link li+li {
  margin-top: 7%;
}

main img {
  max-width: 100%;
}

section {
  padding: 8.3335% 0;
}

section .frame {
  max-width: 1100px;
  width: 57.3%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1024px) {
  section .frame {
    width: 80%;
  }
}

@media screen and (max-width: 767px) {
  section .frame {
    width: 90%;
  }
}

section .frame2 {
  max-width: 1280px;
  width: 66.7%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1024px) {
  section .frame2 {
    width: 90%;
  }
}

@media screen and (max-width: 767px) {
  section .frame2 {
    width: 95%;
  }
}

section h1 {
  max-width: 945px !important;
  margin-left: auto;
  margin-right: auto;
}

section .movie_title {
  margin-bottom: 16px;
}

.youtube {
  margin-top: 5%;
}

section .youtube iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
}

section .link-btn {
  padding: 40px;
}

.share button {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  height: auto;
}

#intro {
  padding-top: 3%;
  padding-bottom: 6.25%;
}

@media screen and (max-width: 767px) {
  #intro {
    padding-top: 6%;
    padding-bottom: 10%;
  }
}

@media screen and (max-width: 767px) {
  #intro h2 {
    width: 80%;
    margin: 0 auto;
  }
}

#intro .txt {
  text-align: center;
  font-weight: bold;
  margin-top: 5%;
}

@media screen and (max-width: 767px) {
  #intro .txt {
    margin-top: 6%;
  }
}

.intro_situation {
  margin-top: 3%;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .intro_situation {
    margin-top: 6%;
  }
}

.intro_situation h3 {
  position: relative;
  background-color: #FF0000;
  color: #fff;
  padding: 2% 0;
  border-radius: 150px;
  font-size: clamp(0.1rem, 2.6041vw, 5rem);
}

@media screen and (max-width: 767px) {
  .intro_situation h3 {
    font-size: clamp(0.1rem, 5.1vw, 2rem);
    padding: 4% 0;
  }
}

.intro_situation h3 span {
  position: absolute;
  display: block;
  right: 4%;
  bottom: 1%;
  font-size: clamp(0.1rem, 1.458333vw, 2.8rem);
}

@media screen and (max-width: 767px) {
  .intro_situation h3 span {
    font-size: clamp(0.1rem, 2.56vw, 1rem);
    right: 7%;
  }
}

.intro_situation ul {
  margin-top: 3%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3%;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .intro_situation ul {
    margin-top: 6%;
  }
}

.intro_situation_count {
  display: flex;
  align-items: baseline;
}

.intro_situation ul li p {
  font-size: clamp(0.1rem, 8.85vw, 17rem);
}

@media screen and (max-width: 767px) {
  .intro_situation ul li p {
    font-size: clamp(0.1rem, 15.38vw, 6rem);
  }
}

.intro_situation ul li span {
  font-size: clamp(0.1rem, 6.25vw, 12rem);
}

@media screen and (max-width: 767px) {
  .intro_situation ul li span {
    font-size: clamp(0.1rem, 5.1vw, 2rem);
  }
}

#intro .intro_situation ul li p.txt {
  font-size: clamp(0.1rem, 1.66666vw, 3.2rem);
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  #intro .intro_situation ul li p.txt {
    font-size: clamp(0.1rem, 4.1vw, 1.6rem);
  }
}

.intro_info {
  margin-top: 9%;
  background-color: #fff;
  position: relative;
}

@media screen and (max-width: 767px) {
  .intro_info {
    margin-top: 15%;
  }
}

.intro_info h3 {
  position: absolute;
  width: 31.016%;
  top: -27%;
  right: -1%;
}

@media screen and (max-width: 767px) {
  .intro_info h3 {
    top: -14%;
  }
}

.intro_info_inner {
  padding: 6.172% 0 2.7345%;
}

@media screen and (max-width: 767px) {
  .intro_info_inner {
    padding: 11.5% 0 5.6%;
  }
}

.intro_info_img {
  width: 56.016%;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .intro_info_img {
    width: 100%;
  }
}

#intro .intro_info_txt.txt {
  width: 47%;
  text-align: left;
  margin: 0;
}

@media screen and (max-width: 767px) {
  #intro .intro_info_txt.txt {
    width: 100%;
    margin-top: 6%;
  }
}

#intro .intro_info_txt p+p {
  font-weight: 400;
  margin-top: 2%;
}

.intro_ttl {
  font-weight: bold;
  background-color: #E9D118;
  color: #fff;
  text-align: center;
  padding: 2% 0;
  font-size: clamp(0.1rem, 2.0833vw, 4rem);
  border-radius: 150px;
  margin-top: 5%;
}

.intro_scroll {
  margin-top: 5%;
}

.intro_scroll ul {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.intro_scroll ul li {
  width: 47%;
}

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

@media screen and (max-width: 767px) {
  #intro .situation h2 p {
    padding-top: 6vw;
  }
}

/*オレオレ詐欺（警察官騙り）*/
#oreore01 {
  background-color: #FFF6B2;
}

.oreore01_img+.oreore01_img {
  margin-top: 0;
}

#oreore01 ul {
  margin-top: 6%;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  #oreore01 ul {
    display: block;
  }
}

#oreore01 ul li {
  width: 47%;
}

@media screen and (max-width: 767px) {

  #oreore01 ul li {
    width: 100%;
  }

  #oreore01 ul li+li {
    margin-top: 3%;
  }
}

#oreore01 ul+.oreore01_img {
  margin-top: 6%;
}

.oreore01_imgWrapper {
  background-color: #fff;
}

.oreore01_btn {
  margin: 5% auto 0;
  width: 80%;
  border-radius: 150px;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .oreore01_btn {
    width: 100%;
    margin-top: 10%;
  }
}

.oreore01_btn a {
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 150px;
  background-color: #707070;
  padding: 2% 0;
  font-size: clamp(0.1rem, 1.66666vw, 3.2rem);
}

@media screen and (max-width: 767px) {
  .oreore01_btn a {
    font-size: clamp(0.1rem, 4.1vw, 1.6rem);
    padding: 2% 0;
    width: 80%;
    margin: 5% auto;
  }
}

/*オレオレ詐欺（息子騙り等）*/
#oreore02 {
  padding: 8.3335% 0;
}

.oreore02_img+.oreore02_img {
  margin-top: 0;
}

/* 架空料金請求詐欺 */
#kaku {
  background-color: #FFF6B2;
}

/* 還付金詐欺 */
#kanpu {
  background-color: #FFF6B2;
}

/* お問い合わせ */
#voice {
  background-color: #000;
}

#voice h2 {
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: clamp(0.1rem, 3.54166vw, 6.8rem);
}

@media screen and (max-width: 767px) {
  #voice h2 {
    font-size: clamp(0.1rem, 5.1vw, 2rem);
  }
}

.voice_contact {
  background-color: #fff;
  text-align: center;
  padding: 3% 0;
  margin-top: 4%;
}

.voice_contact p {
  font-weight: bold;
  padding-bottom: 2%;
  border-bottom: 2px solid #2A3E96;
  font-weight: bold;
}

.tel,
.mail {
  margin: 3% auto 0;
  width: 50%;
}

@media screen and (max-width: 767px) {

  .tel,
  .mail {
    margin: 5% auto 0;
    width: 65%;
  }
}

.fax {
  margin: 2% auto 0;
  width: 50%;
}

@media screen and (max-width: 767px) {
  .fax {
    margin: 3% auto 0;
    width: 65%;
  }
}

.voice_banner {
  margin-top: 3%;
}

footer {
  justify-content: center;
  background: #707070;
  height: 230px;
  font-size: clamp(0.1rem, 1.875vw, 3.6rem);
  color: #fff;
}

.spBr {
  display: none;
}


@media screen and (max-width: 1100px) {
  footer {
    font-size: 14px;
    height: 70px;
  }

  .contact .tel {
    bottom: 39.2%;
  }

  .contact .tel,
  .contact .tel img {
    height: 3.37vw;
  }

  .contact .fax {
    height: 3.37vw;
  }
}

@media screen and (max-width: 767px) {
  .spBr {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .contact .tel {
    bottom: 44.2%;
  }

  #taisaku .share.last {
    margin-top: 50px;
    margin-bottom: 100px;
  }
}

@media screen and (min-width: 767px) {
  .contact .tel {
    pointer-events: none;
  }
}