@charset "utf-8";

/* 
=================================================================================

▼▼▼　テンプレJS用のCSS。不要なものは削除　▼▼▼

=================================================================================
*/
html {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  color: #000;
}

/* アンカーリンクふわっと表示 */
html {
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5 {
  line-height: 1.5;
}
@media screen and (min-width: 769px) {
  /* PC用 */
  html {
    font-size: 10px;
  }
  .inner {
    position: relative;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  /* SP用 */
  html {
    font-size: calc(10vw / 750 * 100); /* 最大値768px、文字サイズ10pxの場合 */
  }
  .inner {
    width: 100%;
    padding: 0 5rem;
    max-width: 100%;
    margin: auto;
  }
}

/* 
=================================================================================

▼▼▼　文字　▼▼▼

=================================================================================
*/
.go {
  font-family: "Noto Sans JP", sans-serif;
}
.pop {
  font-family: "Poppins", sans-serif;
}
.b {
  font-weight: bold;
}
.m {
  font-weight: 500;
}
.georgia{
  font-family: georgia, sans-serif;
}
.intro{
  font-family: 'Intro', sans-serif;
}
.serif{
  font-family: "Noto Serif JP", serif;
}

@font-face {
  font-family: 'Intro';
  src: local('Intro Bold Alt'), local('Intro-Bold-Alt'),
      url('../fonts/Intro-Bold-Alt.woff2') format('woff2'),
      url('../fonts/Intro-Bold-Alt.woff') format('woff'),
      url('../fonts/Intro-Bold-Alt.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
/* 
=================================================================================

▼▼▼　ちらつき対策（CSS）　▼▼▼

=================================================================================
*/

.loading {
  position: fixed;
  background: #fff;
  z-index: 9999;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s all;
  opacity: 1;
  pointer-events: all;
}

/* 
=================================================================================

▼▼▼　ハンバーガーメニュー　▼▼▼

=================================================================================
*/

/* ▼▼ トグルボタン ▼▼ */
:root {
  --hamburger-size: 8rem; /* ハンバーガーアイコンサイズ */
  --hamburger-line: 0.5; /* ハンバーガーアイコンの横線の長さ */
}
.hamburger_area {
  position: relative;
  z-index: 12;
}
.toggle_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 11;
  width: 8rem;
  height: var(--hamburger-size);
  transition: all 0.5s;
  cursor: pointer;
  margin: 0 0 0 auto;
  background: #ff7700;
  border-radius: 1.5rem;
}
.toggle_btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  right: calc((99.99% - (var(--hamburger-size) * var(--hamburger-line))) / 2);
  width: calc(var(--hamburger-size) * var(--hamburger-line));
  height: calc(var(--hamburger-size) * 0.04);/* ハンバーガーアイコンの縦線の長さ */
  border-radius: 50vmin;
  background-color: #fff;
  transition: all 0.5s;
}
.toggle_btn span:nth-child(1) {
  transform: translateY(calc(var(--hamburger-size) * -0.2));
}
.toggle_btn span:nth-child(2) {
}
.toggle_btn span:nth-child(3) {
  transform: translateY(calc(var(--hamburger-size) * 0.2));
  font-size: calc(var(--hamburger-size) * 0.2);
}

/* オープン時 */
body.open .toggle_btn {
  box-shadow: none;
  background: rgba(12,48,97,0);
  color: #fff;
}
body.open .toggle_btn span {
  background-color: #fff;
}
body.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(0) rotate(225deg);
  transform: translateY(0) rotate(225deg);
}
body.open .toggle_btn span:nth-child(2) {
  -webkit-transform: translateY(0) rotate(-225deg);
  transform: translateY(0) rotate(-225deg);
}
body.open .toggle_btn span:nth-child(3) {
  opacity: 0;
}

/* ▲▲ トグルボタン ▲▲ */

/* ▼ グローバルナビ ▼ */
.gloval-nav {
  background-color: #0C3061;
  color: #fff;
  position: fixed;
  z-index: 11;
  top: 0;
  bottom: 0;
  right: 0;
  padding: var(--hamburger-size) 1em 1em;
  transform: translateX(100%);
  transition: 1s all;
  width: 50rem;
  max-height: 100vh;
}
.gloval-nav .gloval_box {
  overflow-y: auto;
  width: 100%;
  height: 100%;
}
.gloval-nav ul.gloval_ul > li {
opacity: 0;
transform: translateX(-200px);
transition:  transform .6s ease, opacity .2s ease;
border-top: 1px solid #DCDDDD;
}
.gloval-nav ul.gloval_ul > li:nth-child(2) { transition-delay: .1s; }
.gloval-nav ul.gloval_ul > li:nth-child(3) { transition-delay: .2s; }
.gloval-nav ul.gloval_ul > li:nth-child(4) { transition-delay: .3s; }
.gloval-nav ul.gloval_ul > li:nth-child(5) { transition-delay: .4s; }
.gloval-nav ul.gloval_ul > li:nth-child(6) { transition-delay: .5s; }
.gloval-nav ul.gloval_ul > li:nth-child(7) { transition-delay: .6s; }
.gloval-nav ul.gloval_ul > li:nth-child(8) { transition-delay: .7s; }
.gloval-nav ul.gloval_ul > li:nth-child(9) { transition-delay: .8s; }
.gloval-nav ul.gloval_ul > li:nth-child(n+10) { transition-delay: .9s; }

.gloval-nav ul.gloval_ul > li > a {
  display: block;
  transition: color .6s ease;
  padding: 2rem 1em 2rem 0;
}

/* open時 */
.open {
  overflow: hidden;
}
.open .hamburger_bg,
.open .gloval-nav {
visibility: visible;
transform: translateX(0);
transition: transform .6s;
}
.open .gloval-nav ul.gloval_ul > li {
opacity: 1;
transform: translateX(0);
transition: transform 1s ease, opacity .9s ease;
}
/* ▲ グローバルナビ ▲ */

/* ▼ アコーディオン ▼ */
.ac_btn {
  padding: .75em 1em .75em 0;
  display: block;
  cursor: pointer;
  position: relative;
}
.ac_btn::before {
  content: "＋";
  position: absolute;
  top: calc((100% - 1em) / 2);
  right: 0;
  pointer-events: none;
  line-height: 1;
  display: inline;
}
.ac_btn.active::before {
  content: "－";
}
ul.sub_gloval_ul {
  display: none;
}
ul.sub_gloval_ul > li {
  border-top: 1px solid #DCDDDD;
}
ul.sub_gloval_ul > li > a {
  display: block;
  padding: .75em 1em;
}
/* ▲ アコーディオン ▲ */

/* ▼ 背景網掛け ▼ */
.hamburger_bg {
  background-color: rgba(0,0,0,0.3);
  position: fixed;
  z-index: 9;
  top: 0;
  bottom: 0;
  right: 0;
  transform: translateX(100%);
  /* transition: 1s all; */
  width: 100vw;
  max-height: 100vh;
}
/* ▲ 背景網掛け ▲ */

.wrapper{
  overflow: hidden;
}
.header_inner{
  position: relative;
  max-width: 162rem;
  margin: auto;
}
.advw{
  width: 33rem;
  margin-left: auto;
  padding: 3rem;
}
.mv{
  position: relative;
}
.mv_box1{
  position: relative;
  max-width: 85vw; /* 1620px */
  margin: auto;
}
.mv_ttle{
  width: 32.81vw;
}
.mv_subtitle{
  font-size: 4.1vw; /* 80px */
  margin-top: 1.5vw;
}
.mv_list1{
  margin-top: 4vw; /* 75px */
  display: flex;
  flex-direction: column;
  gap: 0.8vw; /* 15px */
}
.mv_list1 li{
  width: 43vw;
  font-size: 1.6vw; /* 30px */
  padding: 0.5vw 0.26vw; /* 10px 5px */
  color: #ffffff;
  background-color: #001358;
  position: relative;
}
.mv_list1 li::after{
  content: "";
  display: block;
  width: 2.19vw;
  height: 1.98vw;
  background-image: url(../img/icon.webp);
  background-size: cover;
  position: absolute;
  background-repeat: no-repeat;
  top: -1.5vw;
  right: -1.5vw;
}
.main_contents{
  position: relative;
}
.contatc_btn{
  width: 15.63vw;
  position: fixed;
  bottom: 5%;
  right: 5%;
  z-index: 50;
}
.img01{
  width: 62.5vw; /* 1200px */
  position: absolute;
  bottom: -6.25vw; /* -120px */
  right: -8.85vw; /* -170px */
  z-index: -1;
}
.mv_box2{
  position: relative;
  max-width: 90vw; /* 1720px */
  margin: 6vw auto 0; /* 50px */
  padding-bottom: 2vw; /* 40px */
}
.mv_box2::after{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 75%;
  background-color: #efebe0;
  border-radius: 2.60vw; /* 50px */
  bottom: 0;
  left: 0;
  z-index: -1;
}
.text01{
  width: 34vw; /* 650px */
  margin: auto;
}
.mv_list2{
  max-width: 80vw; /* 1520px */
  margin: auto;
  display: flex;
  align-items: center;
  justify-items: center;
  gap: 1.5vw; /* 30px */
  margin-top: 1.5vw; /* 30px */
}
.mv_list2 li{
  width: calc(25% - 0.8vw); /* 15px */
  font-size: 1.5625vw; /* 30px */
  text-align: center;
  padding: 0.52vw 0; /* 10px */
  background-color: #ffe56d;
  border: solid #001358 0.2rem;
  border-radius: 2.60417vw; /* 50px */
}

.section_inner1{
  max-width: min(76.56vw, 147rem);
  padding: 0 min(2.60vw, 5rem);
  margin: auto;
}
.section_inner2{
  max-width: min(81.77vw, 157rem);
  padding: 0 min(2.60vw, 5rem);
  margin: auto;
}
.section_inner3{
  max-width: min(86.98vw, 167rem);
  padding: 0 min(2.60vw, 5rem);
  margin: auto;
}
.section_inner4{
  max-width: min(92.19vw, 177rem);
  padding: 0 min(2.60vw, 5rem);
  margin: auto;
}

.problem{
  margin-top: min(5.21vw, 10rem);
}
.section_title1{
  font-size: min(3.13vw, 6rem);
  text-align: center;
}
.problem_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: min(4.17vw, 8rem) min(1.04vw, 2rem);
  margin-top: min(2.60vw, 5rem);
}

.problem_item{
  font-size: min(1.77vw, 3.4rem);
  color: #fff;
  background-color: #001358;
  border-radius: min(1.04vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(1.56vw, 3rem) min(3.13vw, 6rem);
  position: relative;
}
.problem_list .problem_item:last-child{
  background-color: transparent;
}
.problem_item::after{
  content: "";
  position: absolute;
  bottom: min(0.05vw, 0.1rem);
  left: 80%;
  border-style: solid;
  border-width: min(2.34vw, 4.5rem) 0 0 min(2.34vw, 4.5rem);
  border-color: #001358 transparent transparent;
  translate: calc(-50% + min(0.002vw, 0.04rem)) 100%;
}
.problem_list .problem_item:last-child:after{
  display: none;
}
.problem_item1 { grid-area: 1 / 1 / 3 / 3; }
.problem_item2 { grid-area: 1 / 3 / 3 / 5; }
.problem_item3 { grid-area: 3 / 1 / 5 / 3; }
.problem_item4 { grid-area: 3 / 3 / 5 / 5; }
.problem_item5 { grid-area: 5 / 1 / 7 / 3; }
.problem_item6 { grid-area: 7 / 1 / 9 / 3; }
.problem_item7 { grid-area: 5 / 3 / 9 / 5; }


.solution{
  margin-top: min(7.81vw, 15rem);
}
.section_title2{
  width: min(32.81vw, 63rem);
  margin: auto;
}
.section_subtitle1{
  font-size: min(3.65vw, 7rem);
  text-align: center;
}
.solution_list1{
  display: flex;
  flex-direction: column;
  gap: min(4.17vw, 8rem);
  margin-top: min(2.60vw, 5rem);
}
.solution_item1 h4{
  font-size: min(1.98vw, 3.8rem);
  text-align: center;
  padding: min(1.30vw, 2.5rem) min(1.04vw, 2rem);
  color: #fff;
  background-color: #f18d00;
  border-radius: min(1.56vw, 3rem);
  position: relative;
}
.solution_item1 h4::before{
  content: "";
  width: min(3.91vw, 7.5rem);
  height: min(3.91vw, 7.5rem);
  background-image: url(../img/img06.webp);
  background-size: contain;
  position: absolute;
  top: calc(50% - min(5.73vw, 11rem));
  left: calc(50% - min(34.38vw, 66rem));
}
.solution_list2{
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: min(2.08vw, 4rem) min(1.04vw, 2rem);
  margin-top: min(2.60vw, 5rem);
}
.solution_item2{
  width: calc(50% - min(0.52vw, 1rem));
  font-size: min(1.46vw, 2.8rem);
  text-indent: min(-1.46vw, -2.8rem);
  padding-left: min(1.98vw, 3.8rem);
  padding-bottom: min(0.52vw, 1rem);
  border-bottom: dotted #f18d00 min(0.10vw, 0.2rem);
}
.img03,.img04,.img05{
  position: relative;
}
.img03::after{
  content: "";
  width: min(10.42vw, 20rem);
  height: min(14.06vw, 27rem);
  background-image: url(../img/img03.webp);
  background-size: contain;
  position: absolute;
  top: calc(50% - min(21.35vw, 41rem));
  left: calc(50% - max(-18.23vw, -35rem));
  z-index: -1;
}
.img04::after{
  content: "";
  width: min(10.42vw, 20rem);
  height: min(14.06vw, 27rem);
  background-image: url(../img/img04.webp);
  background-size: contain;
  position: absolute;
  top: calc(50% - min(10.42vw, 20rem));
  left: calc(50% - max(-29.69vw, -57rem));
}
.img05::after{
  content: "";
  width: min(8.33vw, 16rem);
  height: min(13.02vw, 25rem);
  background-image: url(../img/img05.webp);
  background-size: contain;
  position: absolute;
  top: calc(50% - min(7.81vw, 15rem));
  left: calc(50% - min(47vw, 90rem));
}

.feature{
  margin-top: min(4.17vw, 8rem);
}
.feature_bg{
  background-color: #efebe0;
  border-radius: min(1.56vw, 3rem);
  padding: min(2.60vw, 5rem);
}
.feature .feature_bg{
  padding-bottom: min(7.81vw, 15rem);
}

.img07{
  width: min(27.60vw, 53rem);
  margin: auto;
}
.section_title3{
  font-size: min(3.65vw, 7rem);
  color: #001358;
  text-align: center;
}
.section_text1{
  font-size: min(1.77vw, 3.4rem);
  text-align: center;
}
.feature_list1{
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: min(2.60vw, 5rem);
  margin-top: min(1.56vw, 3rem);
  position: relative;
  z-index: 1;
}
.feature_list1::before{
  content: "";
  width: min(9.38vw, 18rem);
  height: min(12.50vw, 24rem);
  background-image: url(../img/img08.webp);
  background-size: contain;
  position: absolute;
  top: calc(50% - min(19.79vw, 38rem));
  left: calc(50% - min(36.98vw, 71rem));
  z-index: -1;
}
.feature_item1{
  width: calc(50% - min(1.30vw, 2.5rem));
  font-size: min(1.56vw, 3rem);
  text-align: center;
  color: #001358;
  background-color: #ffe56d;
  border: solid #001358 0.2rem;
  border-radius: min(1.04vw, 2rem);
  padding: min(1.04vw, 2rem) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section_subtitle2{
  font-size: min(2.60vw, 5rem);
  text-align: center;
  margin-top: min(5.21vw, 10rem);
}
.feature_list2{
  display: flex;
  flex-wrap: wrap;
  gap: min(2.35vw, 3rem);
  margin-top: min(1.56vw, 3rem);
}
.feature_item2{
  width: calc(50% - min(1.26vw, 1.5rem));
}
.feature_item2 h4{
  height: min(7.81vw, 15rem);
  font-size: min(2.08vw, 4rem);
  text-align: center;
  color: #fff;
  background-color: #001358;
  border-radius: min(1.04vw, 2rem) min(1.04vw, 2rem) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature_item2 p{
  font-size: min(1.46vw, 2.8rem);
  background-color: #fff;
  padding: min(1.56vw, 3rem);
  border-radius: 0 0 min(1.04vw, 2rem) min(1.04vw, 2rem);
  height: min(18.5vw, 35rem);
  line-height: 2;
}
.img09,.img10{
  position: relative;
}
.img09::before{
  content: "";
  display: block;
  width: min(10.42vw, 20rem);
  height: min(11.46vw, 22rem);
  background-image: url(../img/img09.webp);
  background-size: cover;
  position: absolute;
  background-repeat: no-repeat;
  top: calc(50% - min(18.23vw, 35rem));
  left: calc(50% - max(-7.81vw, -15rem));
  z-index: 1;
}
.img10::before{
  content: "";
  display: block;
  width: min(8.33vw, 16rem);
  height: min(11.98vw, 23rem);
  background-image: url(../img/img10.webp);
  background-size: cover;
  position: absolute;
  background-repeat: no-repeat;
  top:calc(50% - min(17.3vw, 23.7rem));
  left: calc(50% - min(24vw, 46rem));
  z-index: 1;
}

.seo{
  margin-top: min(5.21vw, 10rem);
}
.seo p{
  font-size: min(1.46vw, 2.8rem);
  line-height: 2;
}
.seo_box1{
  display: flex;
  margin-top: min(1.56vw, 3rem);
  gap: min(3.13vw, 6rem);
  position: relative;
}
.seo_box1::before{
  content: "";
  display: block;
  width: min(10.94vw, 21rem);
  height: min(15.63vw, 30rem);
  background-image: url(../img/img23.webp);
  background-size: cover;
  position: absolute;
  background-repeat: no-repeat;
  top: calc(50% - min(24.48vw, 47rem));
  left: calc(50% - max(-21.88vw, -42rem));
  z-index: -1;
}
.img25{
  margin-top: min(-3.13vw, -6rem);
  margin-bottom: min(7.81vw, 15rem);
}
.img26{
  position: relative;
}
.img26::after{
  content: "";
  display: block;
  width: min(14.06vw, 27rem);
  height: min(14.06vw, 27rem);
  background-image: url(../img/img26.webp);
  background-size: cover;
  position: absolute;
  background-repeat: no-repeat;
  top: calc(50% - min(9.38vw, 18rem));
  left: calc(50% - max(-28.65vw, -55rem));
}
.img27{
  margin-top: min(1.56vw, 3rem);
}

.plan{
  margin-top: min(7.81vw, 15rem);
}
.plan_bg{
  background-color: #17b4e8;
  border-radius: min(2.60vw, 5rem);
  padding: min(5.21vw, 10rem) min(2.60vw, 5rem);
}
.img11{
  width: min(20.83vw, 40rem);
  margin: auto;
}
.section_title4{
  font-size: min(3.65vw, 7rem);
  color: #fff;
  text-align: center;
}
.plan_box{
  display: flex;
  flex-direction: column;
  gap: min(2.08vw, 4rem);
  margin-top: min(3.13vw, 6rem);
}
.plan_title{
  font-size: min(2.60vw, 5rem);
  text-align: center;
}
.plan_title img{
  width: min(31.77vw, 61rem);
}
.plan_list{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: min(1.04vw, 2rem);
}
.plan_item{
  width: calc(25% - min(0.78vw, 1.5rem));
  font-size: min(1.35vw, 2.6rem);
  text-align: center;
  padding: min(0.52vw, 1rem) 0;
  color: #001358;
  font-weight: bold;
  background-color: #ffe56d;
  border: solid #001358 min(0.16vw, 0.3rem);
  border-radius: min(2.60vw, 5rem);
}
.plan_text{
  font-size: min(1.56vw, 3rem);
  margin-top: min(2.08vw, 4rem);
}
.plan_box .feature_bg{
  padding: min(3.91vw, 7.5rem) min(2.60vw, 5rem);
}

.recommend{
  margin-top: min(5.21vw, 10rem);
}
.recommend_list{
  display: flex;
  flex-wrap: wrap;
  gap: min(2.08vw, 4rem);
  margin-top: min(1.56vw, 3rem);
}
.recommend_item{
  width: calc(50% - min(1.04vw, 2rem));
  background-color: #f18d00;
  padding: min(0.42vw, 0.8rem);
  border-radius: min(2.08vw, 4rem);
}
.recommend_item p{
  font-size: min(1.46vw, 2.8rem);
  color: #fff;
  padding: min(2.08vw, 4rem) min(2.60vw, 5rem);
}
.flow{
  margin-top: min(5.21vw, 10rem);
}


.flow_list{
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: min(6.25vw, 12rem);
  margin-top: min(3.13vw, 6rem);
  padding-top: min(3.13vw, 6rem);
  padding-bottom: min(6.25vw, 12rem);
  position: relative;
  z-index: 1;
}
.flow_list::before{
  content: "";
  display: block;
  width: min(14.06vw, 27rem);
  height: min(18.23vw, 35rem);
  background-image: url(../img/img16.webp);
  background-size: cover;
  position: absolute;
  background-repeat: no-repeat;
  top: calc(50% - min(60.94vw, 117rem));
  left: calc(50% - max(-20.83vw, -40rem));
  z-index: -1;
}
.flow_list::after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/bg06.webp);
  background-size: cover;
  position: absolute;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  z-index: -1;
}
.flow_item{
  position: relative;
  z-index: 100;
}
.flow_item_inner{
  max-width: min(42.71vw, 82rem);
  margin: auto;
}
.flow_item h3{
  font-size: min(2.60vw, 5rem);
  text-align: center;
  color: #001358;
}
.flow_list .flow_item:nth-child(n+3) h3 {
  color: #fff;
}
.flow_item p{
  font-size: min(1.46vw, 2.8rem);
  margin-top: min(1.04vw, 2rem); 
}
.flow_list .flow_item:nth-child(n+3) p {
  color: #fff;
}
.img17{
  width: min(40.63vw, 78rem);
  margin: auto;
}
.f_blue{
  color: #001358;
}
.f_red{
  color: #df0045;
}

.case{
  margin-top: min(5.21vw, 10rem);
}
.case_list{
  margin-top: min(2.60vw, 5rem);
}
.case_item{
  padding: 0 min(0.52vw, 1rem);
}
.case_item h3{
  font-size: min(1.88vw, 3.6rem);
  text-align: center;
  margin-top: min(1.04vw, 2rem);
}
.case_item h3 span{
  font-size: min(1.56vw, 3rem);
}
.case_detail li{
  font-size: min(1.04vw, 2rem);
  padding: min(0.52vw, 1rem);
  border-bottom: dotted #f18d00 min(0.10vw, 0.2rem);
  margin-top: min(1.04vw, 2rem);
}

.qa{
  margin: min(5.21vw, 10rem) 0;
}
.qa_box{
  margin-top: min(3.13vw, 6rem);
}
.qa_box h3{
  font-size: min(2.08vw, 4rem);
  text-align: center;
}
.qa_box p{
  margin-top: min(1.04vw, 2rem);
  font-size: min(1.56vw, 3rem);
}


.top_link_box{
  width: fit-content;
  display: flex;
  align-items: center;
  gap: min(0.26vw, 0.5rem);
  margin-top: min(1.56vw, 3rem);
}
.top_link{
  width: min(10.42vw, 20rem);
  text-align: center;
  color: #000000;
  padding: min(0.78vw, 1.5rem) 0;
  background-color: #ffffff;
  border-radius: min(1.56vw, 3rem);
  font-weight: bold;
}
.arrow{
  display: flex;
  align-items: center;
  justify-content: center;
}
.link_arrow{
  padding: min(0.68vw, 1.3rem);
  color: #000000;
  background-color: #ffffff;
  border-radius: 50%;
  font-weight: bold;
  overflow: hidden;
}
.link_arrow .material-symbols-outlined{
  font-size: min(1.25vw, 2.4rem);
  font-weight: bold;
}
.top_link_box:hover .link_arrow .material-symbols-outlined{
  animation: arrowAnime .120s;
}
@keyframes arrowAnime {
  0% { transform: translateX(0); }
  49% { transform: translateX(min(0.52vw, 1rem)); }
  50% { transform: translateX(min(-0.52vw, -1rem)); }
  51% { transform: translateX(min(-0.52vw, -1rem)); }
  100% { transform: translateX(0); }
}

.contact{
  color: #fff;
  background-color: #001358;
  padding: min(10.42vw, 20rem) 0;
}
.contact h2{
  font-size: min(3.65vw, 7rem);
  text-align: center;
}
.contact h2 span{
  color: #ffe56d;
}
.contact p{
  font-size: min(1.56vw, 3rem);
  margin-top: min(3.13vw, 6rem);
}
.contact_form_box{
  max-width: min(52.08vw, 100rem);
  margin: min(3.13vw, 6rem) auto 0;
}
.contact_form{
  width: 100%;
}
.contact_form .border{
  display: flex;
  flex-direction: column;
  margin-top: min(2.08vw, 4rem);
}
.contact_form .required_label{
  display: flex;
  justify-content: space-between;
  padding: 0 min(1.04vw, 2rem);
}
.contact_form .required_txt{
  color: #ffea00;
}
.form_short,
.form_long,
.contact_text_form{
  width: 100%;
  height: min(3.65vw, 7rem);
  padding: min(1.04vw, 2rem);
  color: #000000;
  background-color: #ffffff;
  border-radius: min(0.26vw, 0.5rem);
}
.contact_text_form{
  height: min(14.58vw, 28rem);
}
.contact_privacy-button{
  text-align: center;
  margin-top: min(4.69vw, 9rem);
}
.submit_btn_box{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(2.60vw, 5rem);
}
.recaptcha{
  width: min(15.63vw, 30rem);
  margin: auto;
}
.g-recaptcha{
  margin: auto;
}
.thanks_btn{
  margin: min(3.13vw, 6rem) auto 0;
}
.thanks_btn .top_link_box{
  margin: auto;
}

.footer{
  font-size: min(2.08vw, 4rem);
  text-align: center;
  background-color: #f18d00;
  padding: min(3.13vw, 6rem);
}
.footer_inner .material-symbols-outlined{
  font-size: 2rem;
  vertical-align: middle;
}
.footer_inner h2{
  font-size: ;
}

@media screen and (max-width: 768px) {
  .mv_ttle{
    width: 37rem;
  }
  .mv_box1,
  .mv_box2{
    max-width: 65rem;
  }
  .mv_subtitle{
    font-size: 4.6rem;
  }
  .mv_list1{
    gap: 1rem;
  }
  .mv_list1 li{
    width: 33rem;
    font-size: 2rem;
    padding: 1rem 2rem;
  }
  .mv_list1 li::after{
    width: 4.2rem;
    height: 3.8rem;
    top: -2rem;
    right: -2rem;
  }
  .img01{
    width: 70rem;
    position: absolute;
    bottom: -7rem;
    right: -7rem;
  }
  .text01{
    width: 51rem;
  }
  .mv_list2{
    max-width: 44.5rem;
    flex-wrap: wrap;
  }
  .mv_list2 li{
    width: calc(50% - 0.6rem);
    font-size: 1.6rem;
  }
  .section_title1{
    font-size: 3rem;
  }
  .section_inner_sp1{
    max-width: 61rem;
    padding: 0;
  }
  .section_inner_sp2{
    max-width: 65rem;
    padding: 0;
  }
  .problem_list{
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    margin-top: 4rem;
  }
  .problem_item{
    font-size: 1.6rem;
    padding: 0.5rem 1rem;
    text-align: start;
    justify-content: start;
  }
  .problem_item1 { grid-area: 1 / 1 / 2 / 3; }
  .problem_item2 { grid-area: 1 / 3 / 2 / 5; }
  .problem_item3 { grid-area: 2 / 1 / 3 / 3; }
  .problem_item4 { grid-area: 2 / 3 / 3 / 5; }
  .problem_item5 { grid-area: 3 / 1 / 4 / 3; }
  .problem_item6 { grid-area: 3 / 3 / 4 / 5; }
  .problem_item7 { grid-area: 4 / 1 / 7 / 5; }

  .section_title2{
    width: 50rem;
  }
  .problem,.seo,.recommend,.flow,.case,.qa{
    margin-top: 6rem;
  }
  .solution{
    margin-top: 9rem;
  }
  .section_subtitle1{
    font-size: 4rem;
  }
  .solution_list1{
    margin-top: 4rem;
    gap: 7rem;
  }
  .img03::after{
    left: 55rem;
    top: -10rem;
  }
  .solution_item1 h4{
    font-size: 2.4rem;
  }
  .solution_item1 h4::before{
    width: 6rem;
    height: 6rem;
    top: -3.5rem;
    left: 1rem;
  }
  .solution_list2{
    gap: 4rem 2rem;
    margin-top: 5rem;
  }
  .solution_item2{
    width: calc(50% - 1rem);
    font-size: 1.6rem;
    text-indent: -1.6rem;
    padding-left: 1.6rem;
    padding-bottom: 1rem;
  }
  .img04::after{
    top: 2rem;
    left: 52rem;
  }
  .img05::after{
    top: 3rem;
    left: 1rem;
  }
  .feature_bg{
    border-radius: 4rem;
    padding: 2rem;
  }
  .feature .feature_bg{
    padding-bottom: 5rem;
  }
  .img07{
    width: 45rem;
  }
  .section_title3{
    font-size: 4rem;
  }
  .section_text1{
    font-size: 2rem;
  }
  .feature_list1{
    margin-top: 4.5rem;
    gap: 2rem;
  }
  .feature_list1::before{
    top: -9rem;
    left: 0;
  }
  .feature_inner{
    max-width: 44.5rem;
    margin: auto;
  }
  .feature_item1{
    width: calc(50% - 1rem);
    font-size: 1.6rem;
  }
  .section_subtitle2{
    font-size: 3rem;
  }
  .feature_list2{
    margin-top: 3rem;
    gap: 3rem;
  }
  .feature_item2{
    width: 100%;
  }
  .feature_item2 h4{
    font-size: 2.6rem;
    height: 9rem;
    border-radius: 2rem 2rem 0 0;
  }
  .feature_item2 p{
    font-size: 1.6rem;
    padding: 2rem 3rem;
    height: 70%;
    border-radius: 0 0 2rem 2rem;
  }
  .img09::before{
    width: 9rem;
    height: 10rem;
    top: -5rem;
    left: 50rem;
  }
  .img10::before{
    width: 8rem;
    height: 12rem;
    top: -2.9rem;
    left: 0rem;
  }
  .seo p{
    font-size: 1.6rem;
    flex: 1;
    line-height: 1.7;
  }
  .img24{
    width: 29rem;
    margin-bottom: -4rem;
  }
  .img25{
    margin-top: 0rem;
    margin-bottom: 6rem;
  }
  .seo_box1{
    align-items: end;
    margin: 1rem auto 0;
  }
  .seo_box1::before{
    width: 9.5rem;
    height: 14rem;
    top: -9rem;
    left: 52rem;
  }
  .img26::after{
    width: 13rem;
    height: 13rem;
    top: -2rem;
    left: 57rem;
  }
  .img11{
    width: 24rem;
  }
  .section_title4{
    font-size: 4rem;
  }
  .plan_box{
    background-color: #efebe0;
    border-radius: 3rem;
  }
  .plan_title{
   font-size: 3rem; 
  }
  .plan_title img{
    width: 39rem;
    margin-top: 2rem;
  }
  .plan_list{
    gap: 1rem;
    margin-top: 2rem;
  }
  .plan_sp_inner{
    max-width: 45rem;
    margin: auto;
  }
  .plan_item{
    width: calc(50% - 0.5rem);
    font-size: 1.6rem;
  }
  .plan_text{
    margin-top: 2rem;
    font-size: 1.6rem;
  }
  .recommend_list{
    margin-top: 4rem;
  }
  .recommend_item{
    width: 100%;
    border-radius: 3.5rem;
    padding: 0.5rem; 
  }
  .recommend_item p{
    font-size: 2.6rem;
  }

  .flow_list{
    margin-top: 2rem;
    padding-top: 6rem;
    gap: 11.5rem;
    padding-bottom: 9rem;
  }
  .flow_item_inner{
    max-width: 53rem;
  }
  .flow_item h3{
    font-size: 4rem;
  }
  .flow_item p{
    font-size: 1.6rem;
    margin-top: 2rem;
  }
  .flow_list::after{
    background-image: url(../img/bg07.webp);
  }
  .img17{
    width: 51rem;
  }
  .case_item h3{
    font-size: 2.4rem;
    margin-top: 2rem;
  }
  .qa_box{
    margin-top: 4rem;
  }
  .qa_box h3{
    font-size: 2.6rem;
  }
  .qa_box p{
    font-size: 1.6rem;
    margin-top: 2rem;
  }
  .qa_box .feature_bg{
    border-radius: 2rem;
  }
  .contact h2{
    font-size: 4rem;
  }
  .contact p{
    font-size: 1.6rem;
    margin-top: 3rem;
  }
  .contact_form_box{
    max-width: 100%;
    font-size: 3.2rem;
  }
  .form_short, .form_long, .contact_text_form{
    height: 8rem;
    padding: 2rem;
  }
  .contatc_btn{
    width: 20rem;
  }
  .top_link{
    width: 15rem;
    border-radius: 5rem;
  }
  .link_arrow .material-symbols-outlined{
    font-size: 2rem;
  }
  .footer_inner .material-symbols-outlined{
    font-size: 4rem;
    vertical-align: middle;
  }
  .footer_inner h2{
    font-size: 4rem;
  }
}