@charset "UTF-8";
@font-face {
  font-family: "CorporateLogo";
  src: url(../font/Corporate-Logo-Medium-ver3.ttf) format("truetype");
}
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-weight: normal;
  font-style: normal;
}

@media screen and (min-width: 769px) {
  html {
    scroll-padding-top: 165px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  html {
    scroll-padding-top: 14vw;
  }
}

body {
  padding: 0;
  font-size: 18px;
  line-height: 1.7em;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "Noto Sans Japanese";
  color: #1a1b1d;
  position: relative;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  body {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 768px) {
  body {
    font-size: 3.7vw;
  }
}

.smp {
  display: none;
}

.pc {
  display: block;
}

@media screen and (max-width: 768px) {
  .smp {
    display: block;
  }
  .pc {
    display: none;
  }
}
h1 .visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

h2 {
  font-size: 50px;
  color: #1a1b1d;
  font-family: "CorporateLogo";
  text-align: center;
  margin-bottom: 56px;
  line-height: 1.2em;
}
h2 span {
  font-size: 28px;
  display: block;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  h2 {
    font-size: 4vw;
    margin-bottom: 3vw;
  }
}
h2 span {
  font-size: 2.2vw;
}

h3 {
  font-size: 38px;
  margin-bottom: 20px;
  font-weight: bold;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  h3 {
    font-size: 3vw;
  }
}

p {
  margin-bottom: 20px;
}

b {
  color: #1a1b1d;
}

li {
  list-style: none;
}

a {
  color: #1a1b1d;
  text-decoration: none;
}

sup {
  font-size: 50%;
  vertical-align: super;
}

@media screen and (max-width: 768px) {
  img {
    max-width: 100%;
  }
  h2 {
    font-size: 6.5vw;
    margin-bottom: 5vw;
  }
  h2 span {
    font-size: 4.5vw;
  }
  h3 {
    font-size: 4vw;
    margin-bottom: 3vw;
  }
}
header {
  padding: 50px 0 30px 0;
  width: 100%;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  background: #ffffff;
  z-index: 999;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  header {
    padding: 4vw 0 4vw 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  header {
    padding: 3vw 0 3vw 0;
  }
}
@media screen and (max-width: 768px) {
  header {
    padding: 5vw 0 0 0;
    position: static;
    transform: none;
  }
}
header .in {
  width: 1400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  header .in {
    width: 100%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  header .in {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  header .in {
    width: 100%;
  }
}
header .in .logo {
  width: 105px;
  margin: 0 10px 0 40px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  header .in .logo {
    width: 10%;
    margin: 0 10px 0 30px;
  }
}
header .in .logo img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  header .in .logo {
    width: 26vw;
    margin: 3vw 0 0 8vw;
  }
}
header.nonav .in h1 {
  width: 80%;
  text-align: left;
  margin: 0;
  font-size: 50px;
  font-family: "CorporateLogo";
  margin-bottom: 56px;
  line-height: 1.2em;
}
header.nonav .in h1 span {
  display: block;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  header.nonav .in h1 {
    width: 100%;
    text-align: center;
    margin: 5vw 0 0 0;
    font-size: 6.5vw;
  }
  header.nonav .in h1 span {
    font-size: 4.5vw;
  }
}
header nav {
  width: 86%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  header nav {
    justify-content: left;
    width: 80%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  header nav {
    width: 82%;
    justify-content: left;
  }
}
@media screen and (max-width: 768px) {
  header nav {
    position: absolute;
  }
}
header nav ul {
  width: 56%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  header nav ul {
    justify-content: left;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  header nav ul {
    width: 50%;
    justify-content: flex-start;
  }
}
header nav ul.btnbox {
  width: 42%;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  header nav ul.btnbox {
    width: 46%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  header nav ul.btnbox {
    width: 45%;
    justify-content: center;
    flex-wrap: inherit;
    gap: 10px;
  }
}
header nav ul.btnbox li {
  width: 31%;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  header nav ul.btnbox li {
    width: 28%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  header nav ul.btnbox li {
    width: 28%;
  }
}
header nav ul.btnbox li a {
  border-radius: 40px;
  border: 3px solid #fccf00;
  display: block;
  padding: 10px 0;
  text-align: center;
  font-weight: bold;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  header nav ul.btnbox li a {
    padding: 5px 0;
    font-size: 12px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  header nav ul.btnbox li a {
    font-size: 12px;
    padding: 5px 5px;
  }
}
header nav ul.btnbox li a:hover {
  background-color: #fccf00;
  border: 3px solid #fccf00;
}
header nav ul.btnbox li:last-child a {
  background-color: #fccf00;
}
header nav ul.btnbox li:last-child a:hover {
  background-color: #ffffff;
  border: 3px solid #fccf00;
}
header nav li {
  box-sizing: border-box;
  margin-left: 10px;
}
header nav li a {
  display: block;
  padding: 0;
  width: 100%;
  font-family: "CorporateLogo";
  color: #1a1b1d;
  font-size: 15px;
  border-bottom: 4px solid #ffffff;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  header nav li a {
    font-size: 1.6vw;
  }
}
header nav li a:hover {
  border-bottom: 4px solid #fccf00;
}
header nav li img.pc {
  display: inline-block;
}

.sub header {
  position: inherit;
  padding: 50px 0 0 0;
}
@media screen and (max-width: 768px) {
  .sub header {
    position: static;
    padding: 5vw 0 0 0;
    transform: none;
  }
}

.kv {
  border-bottom: 2px solid #cbcbcd;
  max-width: 1292px;
  margin: 35px auto 0 auto;
  padding-bottom: 86px;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .kv {
    margin-top: 200px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .kv {
    margin-top: 165px;
  }
}
@media screen and (max-width: 768px) {
  .kv {
    margin: 20vw auto 0 auto;
  }
}
@media (min-width: 1100px) and (max-width: 1450px) {
  .kv {
    max-width: 100%;
  }
}
.kv img {
  width: 100%;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .kv img {
    width: 96%;
    margin: 0 auto;
  }
}
.kv .catch {
  display: block;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.kv h1 {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .kv {
    margin: -20vw auto 0 auto;
    background: none;
    height: auto;
    padding-bottom: 5vw;
  }
  .kv .catch {
    display: none;
  }
  .kv p {
    padding: 0 20px;
  }
}

.kv_sub {
  width: 100%;
  text-align: center;
  padding: 50px 0 70px 0;
  border-bottom: 2px solid #cbcbcd;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .kv_sub {
    padding: 50px 0 40px 0;
  }
}
.kv_sub h1 {
  margin-bottom: 0;
  font-size: 50px;
  color: #1a1b1d;
  font-family: "CorporateLogo";
  line-height: 1.2em;
}
.kv_sub h1 span {
  display: block;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .kv_sub h1 {
    font-size: 6.5vw;
  }
  .kv_sub h1 span {
    font-size: 4.5vw;
  }
}
@media screen and (max-width: 768px) {
  .kv_sub {
    padding: 5vw 0 7vw 0;
  }
}

.sub h2 {
  color: #1a1b1d;
  font-size: 40px;
  margin-bottom: 40px;
  color: #1a1b1d;
  font-family: "CorporateLogo";
}
@media screen and (max-width: 768px) {
  .sub h2 {
    font-size: 7vw;
    margin-bottom: 5vw;
  }
}

article {
  padding: 80px 0 0 0;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  article {
    padding: 5vw 0 0 0;
  }
}
@media screen and (max-width: 768px) {
  article {
    padding: 8vw 0 8vw 0;
  }
}

section {
  width: 100%;
  margin-bottom: 80px;
  text-align: center;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  section {
    margin-bottom: 5vw;
  }
}
@media screen and (max-width: 768px) {
  section {
    margin-bottom: 10vw;
  }
}

.in {
  width: 1100px;
  margin: 0 auto;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  .in {
    width: 90%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .in {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .in {
    width: 90%;
    margin: 0 auto;
  }
}

.read {
  margin-bottom: 75px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .read {
    margin-bottom: 3vw;
  }
}
@media screen and (max-width: 768px) {
  .read {
    margin-bottom: 7vw;
  }
}

a.btn {
  display: block;
  position: relative;
  padding: 20px 72px 20px 50px;
  border-radius: 40px;
  text-align: center;
  font-weight: bold;
  background-color: #fccf00;
  font-family: "CorporateLogo";
  color: #1a1b1d;
  font-size: 18px;
  border: 3px solid #fccf00;
}
a.btn:after {
  content: "";
  background: url(../images/cta_btn_illust.png) no-repeat;
  background-size: contain;
  width: 62px;
  height: 82px;
  position: absolute;
  top: -10px;
  right: 10px;
}
a.btn:hover {
  background-color: #ffffff;
  border: 3px solid #fccf00;
}
a.btn.short {
  padding: 20px 50px 20px 50px;
  box-sizing: border-box;
  border: 3px solid #fccf00;
}
@media screen and (max-width: 768px) {
  a.btn.short {
    padding: 3vw 0;
  }
}
a.btn.short:after {
  display: none;
}

.txarea {
  text-align: center;
  display: block;
  margin: 0px auto 20px auto;
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .txarea {
    max-width: 90%;
  }
}

.case-text {
  text-align: left;
  font-size: 80%;
  margin-top: 20px;
}
.case-text.c {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .case-text {
    max-width: 90%;
    margin: 20px auto 0 auto;
  }
}

.whats img {
  margin-bottom: 40px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .whats img {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .whats img.pc {
    display: inline-block;
  }
}
@media screen and (max-width: 768px) {
  .whats img.sp {
    display: inline-block;
  }
}

.case {
  background-color: #ecf6f8;
  padding: 80px 0 20px 0;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .case {
    padding: 5vw 0 1vw 0;
  }
}
@media screen and (max-width: 768px) {
  .case {
    padding: 10vw 0 5vw 0;
  }
}
.case h2 span {
  display: block;
}
.case h2 span::before {
  content: "＼";
  display: inline-block;
  margin-right: 0.2em;
}
.case h2 span::after {
  content: "／";
  display: inline-block;
  margin-left: 0.2em;
}
.case h3 {
  border-bottom: 2px dotted #1a1b1d;
  margin-bottom: 50px;
  display: inline-block;
  padding-bottom: 30px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .case h3 {
    padding-bottom: 2vw;
    margin-bottom: 3vw;
  }
}
@media screen and (max-width: 768px) {
  .case h3 {
    padding-bottom: 3vw;
    font-size: 4.5vw;
    margin-bottom: 5vw;
  }
  .case h3 .smp {
    display: inline-block;
  }
}
.case .linkbt {
  display: flex;
  justify-content: center;
  gap: 90px;
  margin-bottom: 70px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .case .linkbt {
    gap: 50px;
  }
}
@media screen and (max-width: 768px) {
  .case .linkbt {
    width: 94%;
    gap: 8vw;
    margin: 0 auto 8vw auto;
    flex-direction: column;
  }
}
.case .linkbt a {
  display: block;
  position: relative;
  width: 46%;
  padding: 15px 0;
  height: 60px;
  color: #ffffff;
  font-size: 22px;
  background-color: #5bb4c4;
  border-radius: 47px;
  text-align: center;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .case .linkbt a {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .case .linkbt a {
    width: 100%;
    height: 12vw;
    font-size: 3.8vw;
  }
}
.case .linkbt a:after {
  content: "";
  display: block;
  vertical-align: middle;
  color: #ffffff;
  line-height: 1;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
  position: absolute;
  right: 8%;
  top: 45%;
}
@media screen and (max-width: 768px) {
  .case .linkbt a:after {
    width: 3vw;
    height: 3vw;
  }
}
.case .linkbt a span {
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .case .linkbt a span {
    line-height: 1.4em;
  }
  .case .linkbt a span .smp {
    display: inline-block;
  }
}
.case .linkbt a:hover {
  background-color: #3e98a8;
}
.case .box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .case .box {
    flex-direction: column;
    margin-bottom: 4vw;
  }
}
.case .box .bx {
  width: 45%;
}
@media screen and (max-width: 768px) {
  .case .box .bx {
    width: 100%;
    width: 90%;
    margin: 0 auto 5vw auto;
  }
}
.case .box .bx b {
  font-size: 24px;
  color: #1a1b1d;
  display: block;
  margin-bottom: 30px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .case .box .bx b {
    font-size: 4.5vw;
    margin-bottom: 5vw;
    font-weight: normal;
  }
}
.case .box .bx img {
  display: block;
  margin: 0 auto 20px auto;
}
@media screen and (max-width: 768px) {
  .case .box .bx img {
    width: 40vw;
  }
}
.case .box .bx em {
  display: block;
  width: 100%;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .case .box .bx em {
    line-height: 1.4em;
    text-align: left;
  }
}
.case .box .bx em img {
  margin: 0 0 0 0;
  width: 30%;
}
.case .box .bx p {
  background-color: #ffffff;
  padding: 0 30px 40px 30px;
  margin: 20px auto 0 auto;
  width: 420px;
  box-sizing: border-box;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .case .box .bx p {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .case .box .bx p {
    width: 100%;
    padding: 0 5vw 8vw 5vw;
  }
}
.case .box .bx p:before {
  content: "";
  background: url(../images/case_logo.png) no-repeat;
  width: 291px;
  height: 66px;
  background-size: contain;
  display: block;
  margin: 0 auto 20px auto;
}
@media screen and (max-width: 768px) {
  .case .box .bx p:before {
    width: 100%;
    margin: 0 auto 2vw auto;
  }
}
.case .box.case02 .bx p {
  min-height: 248px;
}
@media screen and (max-width: 768px) {
  .case .box.case02 .bx p {
    min-height: auto;
  }
}
@media screen and (max-width: 768px) {
  .case .box.case02 .bx:last-of-type img {
    width: 30vw;
  }
}
.case .box em {
  font-style: normal;
  font-size: 80%;
  display: inline-block;
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  .case .box em {
    margin-top: 5vw;
  }
}

.risk .in {
  width: 1160px;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  .risk .in {
    width: 100%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .risk .in {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .risk .in {
    width: 100%;
  }
}
.risk h2 span {
  font-size: 50px;
  background-color: #8f9191;
  color: #ffffff;
  display: inline-block;
  margin: 0 5px;
  letter-spacing: -0.01em;
}
@media screen and (max-width: 768px) {
  .risk h2 span {
    font-size: 6.5vw;
  }
}
.risk .box01 {
  display: flex;
  justify-content: center;
  margin-bottom: 65px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .risk .box01 {
    gap: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .risk .box01 {
    flex-wrap: wrap;
    gap: 4vw;
    width: 90%;
    margin: 0 auto 10vw auto;
  }
}
.risk .box01 .bx {
  width: 390px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .risk .box01 .bx {
    width: 30%;
  }
}
.risk .box01 .bx img.pc {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .risk .box01 .bx img.pc {
    display: none;
  }
}
.risk .box01 .bx img.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .risk .box01 .bx img.sp {
    display: inline-block;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .risk .box01 .bx img {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .risk .box01 .bx {
    width: 47%;
  }
  .risk .box01 .bx img {
    margin-bottom: 2vw;
  }
}
.risk .box01 .bx p {
  text-align: center;
  line-height: 1.4em;
}
@media screen and (max-width: 768px) {
  .risk .box01 .bx p {
    text-align: left;
    margin-bottom: 1vw;
  }
}
@media screen and (max-width: 768px) {
  .risk .box01 .bx:last-child {
    width: 60%;
  }
}
.risk .box02 img {
  width: 100%;
}

.point {
  background-color: #ecf6f8;
  padding: 80px 0 0 0;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .point {
    padding: 10vw 0 7vw 0;
  }
}
.point h3 {
  display: flex;
  align-items: flex-start;
}
.point h3 span {
  color: #0788b2;
  font-size: 30px;
  margin-top: 15px;
  font-weight: bold;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .point h3 span {
    font-size: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .point h3 span {
    font-size: 5vw;
    margin-top: 2vw;
  }
}
.point h3 img {
  margin-right: 10px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .point h3 img {
    max-width: 100px;
  }
}
@media screen and (max-width: 768px) {
  .point h3 img {
    max-width: 24vw;
  }
}
.point .box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .point .box {
    flex-direction: column;
  }
}
.point .bxwrap {
  width: 45%;
  margin-bottom: 90px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .point .bxwrap {
    margin-bottom: 5vw;
  }
}
@media screen and (max-width: 768px) {
  .point .bxwrap {
    width: 100%;
    width: 90%;
    margin: 0 auto 7vw auto;
  }
}
.point .bxwrap .bx {
  background-color: #ffffff;
  padding: 50px;
  box-sizing: border-box;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .point .bxwrap .bx {
    padding: 3vw;
  }
  .point .bxwrap .bx img {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .point .bxwrap .bx {
    padding: 7vw 10vw 7vw 10vw;
  }
}
.point .bxwrap .bx p {
  text-align: left;
  margin: 10px 0 0 0;
}
.point .bxwrap .bx p strong {
  display: block;
  font-weight: bold;
  color: #0788b2;
}
.point .bxwrap:nth-child(2) .bx, .point .bxwrap:nth-child(3) .bx {
  min-height: 400px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .point .bxwrap:nth-child(2) .bx, .point .bxwrap:nth-child(3) .bx {
    min-height: 27vw;
  }
}
@media screen and (max-width: 768px) {
  .point .bxwrap:nth-child(2) .bx, .point .bxwrap:nth-child(3) .bx {
    min-height: auto;
  }
}
.point .bxwrap:nth-child(3) .bx, .point .bxwrap:nth-child(4) .bx {
  min-height: 438px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .point .bxwrap:nth-child(3) .bx, .point .bxwrap:nth-child(4) .bx {
    min-height: 27vw;
  }
}
@media screen and (max-width: 768px) {
  .point .bxwrap:nth-child(3) .bx, .point .bxwrap:nth-child(4) .bx {
    min-height: auto;
  }
}
.point .bxwrap:nth-child(3) .bx {
  padding: 70px 50px 50px 50px;
}
@media screen and (max-width: 768px) {
  .point .bxwrap:nth-child(3) .bx {
    padding: 10vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .point .bxwrap:nth-child(4) img {
    width: 60%;
  }
  .point .bxwrap:nth-child(3) img {
    width: 80%;
  }
  .point .bxwrap:nth-child(2) img {
    width: 80%;
  }
  .point .bxwrap:nth-child(1) img {
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .point .bxwrap:nth-child(4) img {
    width: 60%;
  }
  .point .bxwrap:nth-child(3) img {
    width: 80%;
  }
  .point .bxwrap:nth-child(2) img {
    width: 80%;
  }
  .point .bxwrap:nth-child(1) img {
    width: 90%;
  }
}

.ex {
  margin: 80px auto;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  .ex img {
    width: 100%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .ex {
    margin: 7vw 0;
  }
  .ex img {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .ex {
    margin: 10vw 0;
  }
}

.ctabox {
  background-color: #f9f9e3;
}
.ctabox.bg {
  background-color: #ecf6f8;
}
.ctabox .in {
  width: 1400px;
  padding: 0px 0 70px 0;
  position: relative;
  box-sizing: border-box;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  .ctabox .in {
    width: 100%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .ctabox .in {
    width: 100%;
    padding: 0px 0 3vw 0;
  }
}
@media screen and (max-width: 768px) {
  .ctabox .in {
    width: 100%;
    padding: 0px 0 7vw 0;
  }
}
.ctabox .in:before {
  content: "";
  background: url(../images/cta_illust01.png) no-repeat;
  background-size: contain;
  width: 213px;
  height: 197px;
  display: block;
  position: absolute;
  left: 10px;
  top: 56px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .ctabox .in:before {
    width: 20vw;
  }
}
@media screen and (max-width: 768px) {
  .ctabox .in:before {
    display: none;
  }
}
.ctabox .in:after {
  content: "";
  background: url(../images/cta_illust02.png) no-repeat;
  background-size: contain;
  width: 207px;
  height: 186px;
  display: block;
  position: absolute;
  right: 10px;
  top: 56px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .ctabox .in:after {
    width: 20vw;
  }
}
@media screen and (max-width: 768px) {
  .ctabox .in:after {
    display: none;
  }
}
.ctabox .cta-heading {
  font-size: 34px;
  text-align: center;
  line-height: 2em;
  margin-bottom: 2vw;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  .ctabox .cta-heading {
    font-size: 24px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .ctabox .cta-heading {
    font-size: 3vw;
    margin-bottom: 7vw;
  }
  .ctabox .cta-heading .smp {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .ctabox .cta-heading {
    font-size: 4.5vw;
    text-align: left;
  }
}
.ctabox .cta-heading img {
  max-width: 350px;
  vertical-align: middle;
  margin-right: 10px;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  .ctabox .cta-heading img {
    max-width: 250px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .ctabox .cta-heading img {
    max-width: 260px;
  }
}
@media screen and (max-width: 768px) {
  .ctabox .cta-heading img {
    max-width: 38vw;
    margin-right: 5px;
  }
}
.ctabox .cta-heading:before {
  content: "";
  background: #fccf00;
  height: 50px;
  width: 92px;
  margin: 0 auto;
  display: block;
  margin-bottom: 40px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .ctabox .cta-heading:before {
    margin-bottom: 6vw;
  }
}
@media screen and (max-width: 768px) {
  .ctabox .cta-heading:before {
    height: 25px;
    width: 46px;
    margin-bottom: 6vw;
  }
}
@media screen and (max-width: 768px) {
  .ctabox .cta-heading span {
    display: flex;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
  }
  .ctabox .cta-heading span:before {
    content: "";
    background: url(../images/cta_illust01.png) no-repeat;
    background-size: contain;
    width: 30%;
    height: 24vw;
    display: block;
    margin-right: 3vw;
  }
  .ctabox .cta-heading span b {
    display: block;
    width: 70%;
    padding-top: 3vw;
    font-weight: bold;
    line-height: 1.7em;
  }
}
.ctabox ul.btnbox {
  width: 77%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 30px;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  .ctabox ul.btnbox {
    width: 76%;
    gap: 20px;
  }
}
.ctabox ul.btnbox li {
  width: 31%;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  .ctabox ul.btnbox li {
    width: 29%;
  }
}
.ctabox ul.btnbox li a {
  border-radius: 40px;
  border: 3px solid #fccf00;
  display: block;
  padding: 20px 50px 20px 50px;
  text-align: center;
  font-weight: bold;
  background-color: #fff;
  color: #1a1b1d;
  font-size: 28px;
  font-family: "CorporateLogo";
  box-sizing: border-box;
}
@media (min-width: 1100px) and (max-width: 1450px) {
  .ctabox ul.btnbox li a {
    font-size: 2vw;
    padding: 20px 20px 20px 20px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .ctabox ul.btnbox li a {
    padding: 2vw 0 2vw 0;
    font-size: 2.5vw;
  }
}
.ctabox ul.btnbox li a:hover {
  background-color: #fccf00;
  border: 3px solid #fccf00;
}
.ctabox ul.btnbox li a.btn {
  width: 100%;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .ctabox ul.btnbox li:last-child {
    width: 35%;
  }
}
.ctabox ul.btnbox li:last-child a {
  background-color: #fccf00;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .ctabox ul.btnbox li:last-child a {
    padding: 2vw 4vw 2vw 0;
  }
}
.ctabox ul.btnbox li:last-child a:hover {
  background-color: #ffffff;
  border: 3px solid #fccf00;
}
@media screen and (max-width: 768px) {
  .ctabox ul.btnbox {
    justify-content: center;
    margin: 4vw auto 0 auto;
    width: 90%;
    flex-wrap: wrap;
    gap: 5vw;
  }
  .ctabox ul.btnbox li {
    width: 46%;
    margin: 0;
  }
  .ctabox ul.btnbox li a {
    font-size: 4.5vw;
    padding: 3vw 0;
    background-color: #ffffff;
  }
  .ctabox ul.btnbox li a.btn {
    padding-right: 3vw;
  }
  .ctabox ul.btnbox li a.btn:after {
    width: 52px;
    top: -20px;
  }
  .ctabox ul.btnbox li:last-child {
    margin: auto;
    margin-top: 2vw;
    width: 60%;
  }
}

.faq {
  margin: 80px auto;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .faq {
    margin: 5vw 0;
  }
}
@media screen and (max-width: 768px) {
  .faq {
    margin: 10vw 0;
  }
}
.faq dl {
  margin-bottom: 30px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .faq dl {
    margin-bottom: 0;
  }
}
.faq dl i {
  display: block;
  border-radius: 60px;
  text-align: center;
  width: 60px;
  margin-right: 20px;
  line-height: 60px;
  font-size: 28px;
  font-weight: bold;
  font-family: "CorporateLogo";
  height: 60px;
  line-height: 55px;
}
@media screen and (max-width: 768px) {
  .faq dl i {
    border-radius: 10vw;
    width: 10vw;
    font-size: 5vw;
    height: 10vw;
    line-height: 9vw;
  }
}
.faq dl dt {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 30px 0;
  font-size: 22px;
}
@media screen and (max-width: 768px) {
  .faq dl dt {
    margin: 0 0 5vw 0;
    font-size: 4.2vw;
    cursor: pointer;
    position: relative;
  }
  .faq dl dt::before {
    /* 閉じている時 */
    content: "";
    position: absolute;
    right: 20px;
    color: #333;
    line-height: 1;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(135deg);
    top: 30%;
  }
  .faq dl dt.active::before {
    content: "";
    transform: translateY(25%) rotate(-45deg);
  }
}
.faq dl dt i {
  background-color: #d1e8ec;
}
.faq dl dt b {
  display: block;
  border-bottom: 1px solid #a7aeaf;
  color: #1a1b1d;
  width: 90%;
  padding: 8px 0 0 0;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .faq dl dt b {
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .faq dl dt b {
    width: 80%;
    padding: 2vw 10vw 5vw 0;
    box-sizing: border-box;
  }
}
.faq dl dd {
  margin: 0 0 10px 0;
}
.faq dl dd div {
  display: flex;
  justify-content: flex-start;
}
@media screen and (max-width: 768px) {
  .faq dl dd {
    display: none;
  }
}
.faq dl dd i {
  background-color: #1a1b1d;
  color: #ffffff;
}
.faq dl dd p {
  margin-bottom: 0;
  padding-top: 8px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .faq dl dd p {
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .faq dl dd p {
    width: 80%;
    padding-top: 0;
  }
}

.application a {
  text-decoration: underline;
}
.application .caution {
  background-color: #f9f9e3;
  margin: 0 auto 70px auto;
  text-align: left;
  font-size: 80%;
  width: 80%;
  padding: 20px;
}
@media screen and (max-width: 768px) {
  .application .caution {
    font-size: 96%;
    margin: 0 auto 10vw auto;
  }
}
.application .caution li {
  list-style: disc;
  margin-left: 30px;
}
@media screen and (max-width: 768px) {
  .application .caution li {
    margin-left: 3vw;
  }
}
.application h2 {
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .application h2 {
    margin-bottom: 20vw;
  }
}
.application .read {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .application .read {
    margin-bottom: 5vw;
  }
}
.application .box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 70px;
}
@media screen and (max-width: 768px) {
  .application .box {
    flex-wrap: wrap;
    margin-bottom: 7vw;
    flex-direction: column;
  }
}
.application .box .bx {
  width: 22%;
  background-color: #ecf6f8;
  position: relative;
}
@media screen and (max-width: 768px) {
  .application .box .bx {
    width: 100%;
    margin-bottom: 26vw;
  }
  .application .box .bx:last-child {
    margin-bottom: 5vw;
  }
}
.application .box .bx img.step {
  position: absolute;
  top: -50px;
  width: 68%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .application .box .bx img.step {
    width: 48%;
  }
}
.application .box .bx::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  right: -30px;
  border-style: solid;
  border-width: 30px 0 30px 30px;
  border-color: transparent transparent transparent #71b8c5;
}
@media screen and (max-width: 768px) {
  .application .box .bx::after {
    border-width: 30px 30px 0 30px;
    border-color: #71b8c5 transparent transparent transparent;
    bottom: -30px;
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
}
.application .box .bx p {
  padding: 30px 25px;
  font-size: 16px;
  text-align: left;
  line-height: 1.6em;
}
@media screen and (max-width: 768px) {
  .application .box .bx p {
    margin-bottom: 0;
    font-size: 100%;
    padding: 10vw 25px 30px 25px;
  }
}
@media screen and (min-width: 500px) and (max-width: 768px) {
  .application .box .bx p {
    padding: 21vw 5vw 7vw 5vw;
  }
}
.application .box .bx p img {
  margin: 70px auto 20px auto;
  display: block;
  width: 60%;
}
@media screen and (max-width: 768px) {
  .application .box .bx p img {
    width: 44%;
  }
}
.application .box .bx:last-child:after {
  display: none;
}

.top .application {
  margin: 80px auto;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .top .application {
    margin: 5vw 0;
  }
}
@media screen and (max-width: 768px) {
  .top .application {
    margin: 10vw 0;
  }
}
.top .application .box {
  margin-bottom: 60px;
  padding-top: 56px;
}
@media screen and (max-width: 768px) {
  .top .application .box {
    margin-bottom: 5vw;
  }
}
.top .application .box .bx {
  width: 28%;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .top .application .box .bx {
    width: 30%;
  }
}
@media screen and (max-width: 768px) {
  .top .application .box .bx {
    width: 100%;
  }
}
.top .application .box .bx:after {
  right: -40px;
  border-width: 40px 0 40px 40px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .top .application .box .bx:after {
    right: -30px;
    border-width: 30px 0 30px 30px;
  }
}
@media screen and (max-width: 768px) {
  .top .application .box .bx:after {
    border-width: 30px 30px 0 30px;
    border-color: #71b8c5 transparent transparent transparent;
    bottom: -30px;
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
}
.top .application .box .bx img.step {
  width: 40%;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .top .application .box .bx img.step {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .top .application .box .bx img.step {
    width: 36%;
  }
}
.top .application .box .bx p {
  padding: 80px 25px 30px 25px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .top .application .box .bx p {
    padding: 6vw 3vw 3vw 3vw;
  }
}
@media screen and (max-width: 768px) {
  .top .application .box .bx p {
    padding: 20vw 25px 30px 25px;
  }
}
@media screen and (min-width: 500px) and (max-width: 768px) {
  .top .application .box .bx p {
    padding: 21vw 5vw 7vw 5vw;
  }
}

a.btn {
  width: 240px;
  margin: 0 auto 20px auto;
  text-decoration: none;
  font-size: 120%;
}
@media screen and (max-width: 768px) {
  a.btn {
    width: 50%;
  }
}

/*料金プラン*/
.plan {
  margin: 80px auto;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .plan {
    margin: 5vw 0;
  }
}
@media screen and (max-width: 768px) {
  .plan {
    margin: 10vw 0;
  }
}
.plan h2 {
  margin-bottom: 50px;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .plan h2 {
    margin-bottom: 3vw;
  }
}
@media screen and (max-width: 768px) {
  .plan h2 {
    margin-bottom: 5vw;
  }
}
.plan table {
  width: 1015px;
  border-collapse: collapse;
  border-bottom: 2px solid #a7aeaf;
  margin: 0 auto;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .plan table {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .plan table {
    width: 100%;
    table-layout: fixed;
    min-width: 500px;
  }
}
.plan table tr:last-child td {
  border-bottom: none;
}
.plan table th {
  border-top: 2px solid #a7aeaf;
  border-left: 2px solid #a7aeaf;
  border-right: 2px solid #a7aeaf;
  padding: 20px 10px;
  vertical-align: middle;
  font-size: 20px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .plan table th {
    font-size: 105%;
    padding: 3vw 2vw;
  }
}
.plan table th:last-child {
  border-bottom: 2px solid #a7aeaf;
}
.plan table td {
  padding: 30px 30px;
  vertical-align: middle;
  border-bottom: 2px solid #a7aeaf;
  border-right: 2px solid #a7aeaf;
  font-size: 20px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .plan table td {
    font-size: 105%;
    padding: 3vw;
  }
}
.plan table thead th {
  font-size: 24px;
  width: 20%;
  padding: 30px 0;
  border-top: none;
  border-left: none;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .plan table thead th {
    font-size: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .plan table thead th {
    font-size: 105%;
    width: 15%;
    padding: 3vw 0;
  }
}
.plan table thead th:first-child {
  border: none;
  width: 12%;
}
@media screen and (max-width: 768px) {
  .plan table thead th:first-child {
    width: 5%;
  }
}
.plan table thead th.plan01 {
  background-color: #fccf00;
  border-right: 2px solid #ffffff;
}
.plan table thead th.plan02 {
  background-color: #fc8e00;
  color: #ffffff;
  border-right: 2px solid #ffffff;
}
.plan table thead th.plan03 {
  background-color: #fc6500;
  color: #ffffff;
  border-right: none;
}
.plan table thead th:last-child {
  border-bottom: none;
}
.plan table span {
  font-size: 80%;
  display: inline-block;
  line-height: 1.7em;
}
.plan table span .pc {
  display: inline-block;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .plan table span .pc {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .plan table span {
    font-size: 90%;
  }
  .plan table span .pc {
    display: none;
  }
}
.plan table b {
  color: #fc6500;
  font-weight: bold;
}
.plan table i {
  color: #fc6500;
  font-size: 120%;
  font-weight: bold;
  font-style: normal;
}
.plan .caution02 {
  width: 1015px;
  margin: 0 0 70px 0;
  font-size: 80%;
  text-align: right;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .plan .caution02 {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .plan .caution02 {
    width: 100%;
    text-align: left;
    font-size: 90%;
    margin: 0 0 7vw 0;
  }
}
@media screen and (max-width: 768px) {
  .plan .tableArea {
    max-width: 100%;
    overflow: auto;
  }
  .plan .tableArea .scroll-hint-text {
    margin-top: 0;
  }
}

.sub .plan {
  margin: 0 auto 80px auto;
}

footer {
  padding: 80px 0 95px 0;
  text-align: center;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  footer {
    padding: 0 0 10vw 0;
    font-size: 90%;
  }
}
footer a {
  font-size: 14px;
  color: #1a1b1d;
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  footer a {
    font-size: 90%;
  }
}
footer p {
  padding: 20px 0 0 0;
}
@media screen and (max-width: 768px) {
  footer p {
    padding: 3vw 0 0 0;
  }
}

#gotop {
  position: fixed;
  bottom: 20px;
  right: 40px;
  background: url("../images/arrow_gotop.png") no-repeat top;
  background-size: 30px 30px;
  z-index: 100;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  #gotop {
    bottom: 2vw;
    right: 2vw;
    background-size: 10vw 10vw;
    width: 10vw;
    height: 10vw;
  }
}

/*スマホドロワーメニュー*/
@media screen and (max-width: 768px) {
  header .btn {
    display: block;
    width: 70px;
    height: 70px;
    position: fixed;
    right: 15px;
    top: 5vw;
    background-color: #ecf6f8;
    z-index: 9999999;
    border-radius: 70px;
    border: 4px solid #fff;
  }
  header .btn:before, header .btn:after,
  header .btn span {
    display: block;
    width: 45%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transition: 0.35s ease-in-out;
  }
  header .btn span {
    height: 2px;
    background-color: #5b5e63;
    top: calc(50% - 1px);
  }
  header .btn:before {
    content: "";
    top: calc(30% - 1px);
    border-top: 2px solid #5b5e63;
  }
  header .btn:after {
    content: "";
    bottom: calc(30% - 1px);
    border-bottom: 2px solid #5b5e63;
  }
  header .btn.on span {
    display: none;
  }
  header .btn.on:before {
    top: calc(50% - 0.5px);
    transform: rotate(315deg);
  }
  header .btn.on:after {
    bottom: calc(50% - 0.5px);
    transform: rotate(-315deg);
  }
}

@media screen and (max-width: 768px) {
  header nav {
    display: none;
    width: 100%;
    position: fixed;
    z-index: 999999;
    background-color: #ecf6f8;
    top: 27vw;
    line-height: 0;
    padding: 7vw 0;
    flex-direction: column;
    height: auto !important;
  }
  header nav ul {
    width: 90%;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
  }
  header nav li {
    width: 49%;
    margin-left: 0;
  }
  header nav li a {
    padding: 20px 5px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
  }
  header nav ul.btnbox {
    width: 100%;
    justify-content: center;
    margin: 4vw auto 0 auto;
  }
  header nav ul.btnbox li {
    width: 40%;
    margin: 0 3vw;
  }
  header nav ul.btnbox li a {
    padding: 5vw 0;
    background-color: #ffffff;
  }
  header nav ul.btnbox li:last-child {
    margin: auto;
    margin-top: 4vw;
  }
}
@media screen and (min-width: 769px) {
  header nav {
    display: flex !important;
  }
}

.footnav {
  display: none;
}
@media screen and (max-width: 768px) {
  .footnav {
    display: flex;
    width: 100%;
    gap: 2%;
    box-sizing: border-box;
    background: #ecf6f8;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 3vw 1vw;
  }
  .footnav a {
    padding: 1.5vw 0;
    width: 29%;
    color: #1a1b1d;
    background-color: #ffffff;
    font-size: 86%;
    border-radius: 30px;
    border: 3px solid #fccf00;
    display: block;
    text-align: center;
    font-weight: bold;
    font-family: "CorporateLogo";
  }
  .footnav a:last-child {
    background-color: #fccf00;
  }
}/*# sourceMappingURL=style.css.map */