/* フォントは Google Fonts から配信する（index.html の <link> で読み込み）。
   以前は font/ の TTF を10ファイル（合計58MB）自前配信していたが、
   1ファイル5.5MBで表示が極端に重くなるため廃止した。
   Google Fonts は可変フォントを必要な文字だけ配信するので合計100KB前後で済む。 */
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.6rem;
  line-height: 1.4;
  vertical-align: baseline;
  box-sizing: border-box;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  font-size: 62.5%;
}

em {
  color: black;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.content {
  margin-top: 0;
}

.wrap {
  width: 100%;
}

.main {
  padding: 0;
  border-radius: 0;
  border: none;
}

.mysyle {
  overflow: hidden;
}

a {
  text-decoration: none;
}

input[type=submit],
input[type=checkbox],
input[type=radio] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

.pc-layout {
  display: block;
}

.sp-layout {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .pc-layout {
    display: none !important;
  }
  .sp-layout {
    display: block !important;
  }
}
html.active,
body.active {
  overflow: hidden;
}

.pc {
  display: block;
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media (max-width: 768px) {
  .sp {
    display: block;
  }
}

.imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
}

.floating {
  position: relative;
  display: block;
  position: fixed;
  z-index: 100;
  bottom: 1.3888888889vw;
  right: 1.3888888889vw;
}
@media screen and (min-width: 1800px) {
  .floating {
    bottom: 1.1111111111vw;
    right: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .floating {
    bottom: 33px;
    right: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .floating {
    bottom: 1.6vw;
    right: 1.6vw;
  }
}
@media screen and (max-width: 768px) {
  .floating {
    bottom: 1.3020833333vw;
    right: 1.3020833333vw;
  }
}
@media screen and (max-width: 450px) {
  .floating {
    bottom: 2.2222222222vw;
    right: 2.2222222222vw;
  }
}
.floating .div {
  padding: 0.6944444444vw 3.4722222222vw;
  border-radius: 0.6944444444vw;
  display: flex;
  align-items: center;
  position: relative;
  background-color: #ffffff;
  border: 2px solid;
  border-color: #f68e1b;
  position: relative;
  color: #f68e1b;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .floating .div {
    padding: 0.5555555556vw 2.7777777778vw;
    border-radius: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .floating .div {
    padding: 16.5px 82.5px;
    border-radius: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .floating .div {
    padding: 0.8vw 4vw;
    border-radius: 0.8vw;
  }
}
.floating .text-wrapper {
  letter-spacing: 0.0347222222vw;
  font-size: 1.6666666667vw;
  text-align: center;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 800;
}
@media screen and (min-width: 1800px) {
  .floating .text-wrapper {
    letter-spacing: 0.0277777778vw;
    font-size: 1.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .floating .text-wrapper {
    letter-spacing: 0.825px;
    font-size: 39.6px;
  }
}
@media screen and (max-width: 1250px) {
  .floating .text-wrapper {
    letter-spacing: 0.04vw;
    font-size: 1.92vw;
  }
}
.floating .span {
  font-size: 2.2222222222vw;
  letter-spacing: 0.0347222222vw;
  line-height: 3.0555555556vw;
  text-align: center;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 800;
}
@media screen and (min-width: 1800px) {
  .floating .span {
    font-size: 1.7777777778vw;
    letter-spacing: 0.0277777778vw;
    line-height: 2.4444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .floating .span {
    letter-spacing: 0.825px;
    font-size: 52.8px;
    line-height: 72.6px;
  }
}
@media screen and (max-width: 1250px) {
  .floating .span {
    font-size: 2.56vw;
    letter-spacing: 0.04vw;
    line-height: 3.52vw;
  }
}
.floating .imgArea {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.8333333333vw;
  width: 1.7361111111vw;
}
@media screen and (min-width: 1800px) {
  .floating .imgArea {
    right: 0.6666666667vw;
    width: 1.3888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .floating .imgArea {
    right: 19.8px;
    width: 41.25px;
  }
}
@media screen and (max-width: 1250px) {
  .floating .imgArea {
    right: 0.96vw;
    width: 2vw;
  }
}

.overlay {
  top: 4.8611111111vw;
  padding: 4.1666666667vw;
  background: #0344A4;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
@media screen and (min-width: 1800px) {
  .overlay {
    top: 3.8888888889vw;
    padding: 3.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .overlay {
    top: 115.5px;
    padding: 99px;
  }
}
@media screen and (max-width: 1250px) {
  .overlay {
    top: 5.6vw;
    padding: 4.8vw;
  }
}
@media screen and (max-width: 768px) {
  .overlay {
    top: 9.1145833333vw;
    padding: 7.8125vw;
  }
}
@media screen and (max-width: 450px) {
  .overlay {
    top: 15.5555555556vw;
    padding: 13.3333333333vw;
  }
}
.overlay.active {
  opacity: 1;
  pointer-events: all;
}
.overlay .div {
  gap: 2.7777777778vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .overlay .div {
    gap: 2.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .overlay .div {
    gap: 66px;
  }
}
@media screen and (max-width: 1250px) {
  .overlay .div {
    gap: 3.2vw;
  }
}
@media screen and (max-width: 768px) {
  .overlay .div {
    gap: 5.2083333333vw;
  }
}
@media screen and (max-width: 450px) {
  .overlay .div {
    gap: 8.8888888889vw;
  }
}
.overlay .div .link-text .link {
  font-size: 1.6666666667vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: #FFF;
  letter-spacing: 0;
  line-height: 150%;
}
@media screen and (min-width: 1800px) {
  .overlay .div .link-text .link {
    font-size: 1.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .overlay .div .link-text .link {
    font-size: 39.6px;
  }
}
@media screen and (max-width: 1250px) {
  .overlay .div .link-text .link {
    font-size: 1.92vw;
  }
}
@media screen and (max-width: 768px) {
  .overlay .div .link-text .link {
    font-size: 3.125vw;
  }
}
@media screen and (max-width: 450px) {
  .overlay .div .link-text .link {
    font-size: 5.3333333333vw;
  }
}

.navbar {
  padding: 0.6944444444vw 4.4444444444vw;
}
@media screen and (min-width: 1800px) {
  .navbar {
    padding: 0.5555555556vw 3.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .navbar {
    padding: 16.5px 105.6px;
  }
}
@media screen and (max-width: 1250px) {
  .navbar {
    padding: 0.8vw 5.12vw;
  }
}
@media screen and (max-width: 768px) {
  .navbar {
    padding: 3.125vw 8.3333333333vw;
  }
}
@media screen and (max-width: 450px) {
  .navbar {
    padding: 5.3333333333vw 14.2222222222vw;
  }
}
.navbar .humberger {
  display: none;
}
.navbar.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 900;
  transition: background-color 0.3s ease;
}
.navbar.fixed-nav.active {
  background-color: white;
}
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.navbar .container .logo-link {
  width: 12.5vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .navbar .container .logo-link {
    width: 10vw;
  }
}
@media screen and (min-width: 2200px) {
  .navbar .container .logo-link {
    width: 297px;
  }
}
@media screen and (max-width: 1250px) {
  .navbar .container .logo-link {
    width: 14.4vw;
  }
}
@media screen and (max-width: 768px) {
  .navbar .container .logo-link {
    width: 15.625vw;
  }
}
@media screen and (max-width: 450px) {
  .navbar .container .logo-link {
    width: 26.6666666667vw;
  }
}
.navbar .container .logo-link .imgArea {
  display: block;
  width: 100%;
}
.navbar .container .div {
  gap: 2.7777777778vw;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .navbar .container .div {
    gap: 2.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .navbar .container .div {
    gap: 66px;
  }
}
@media screen and (max-width: 1250px) {
  .navbar .container .div {
    gap: 3.2vw;
  }
}
@media screen and (max-width: 768px) {
  .navbar .container .div {
    gap: 5.2083333333vw;
  }
}
@media screen and (max-width: 450px) {
  .navbar .container .div {
    gap: 8.8888888889vw;
  }
}
.navbar .container .div .link-text .link {
  font-size: 1.1111111111vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: 150%;
}
@media screen and (min-width: 1800px) {
  .navbar .container .div .link-text .link {
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .navbar .container .div .link-text .link {
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .navbar .container .div .link-text .link {
    font-size: 1.28vw;
  }
}
@media screen and (max-width: 768px) {
  .navbar .container .div .link-text .link {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 450px) {
  .navbar .container .div .link-text .link {
    font-size: 3.5555555556vw;
  }
}
.navbar .container .humberger {
  display: none;
}

.m-header .fv {
  height: 37.5vw;
  margin-top: 6.2vw;
  background: #FFF;
  position: relative;
}
@media screen and (min-width: 1800px) {
  .m-header .fv {
    height: 30vw;
    margin-top: 5vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv {
    height: 890px;
    margin-top: 147px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv {
    margin-top: 7vw;
    height: 43vw;
  }
}
.m-header .fv .main-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.m-header .fv .text-area {
  left: 5.5555555556vw;
  gap: 0.9722222222vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .text-area {
    left: 4.4444444444vw;
    gap: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .text-area {
    left: 132px;
    gap: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .text-area {
    left: 6.4vw;
    gap: 1.12vw;
  }
}
.m-header .fv .text-area .top-text {
  gap: 0.6944444444vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .text-area .top-text {
    gap: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .text-area .top-text {
    gap: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .text-area .top-text {
    gap: 0.8vw;
  }
}
.m-header .fv .text-area .top-text .main-title {
  font-size: 1.6666666667vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 100%;
  color: #FFF;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .text-area .top-text .main-title {
    font-size: 1.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .text-area .top-text .main-title {
    font-size: 39.6px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .text-area .top-text .main-title {
    font-size: 1.76vw;
  }
}
.m-header .fv .text-area .top-text .main-title .span {
  font-size: 3.125vw;
  margin-top: 0.6944444444vw;
  display: block;
  line-height: 130%;
  letter-spacing: 1px;
  color: #F1E03A;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 900;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .text-area .top-text .main-title .span {
    font-size: 2.5vw;
    margin-top: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .text-area .top-text .main-title .span {
    font-size: 74.25px;
    margin-top: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .text-area .top-text .main-title .span {
    font-size: 3.2vw;
    margin-top: 0.8vw;
  }
}
.m-header .fv .text-area .top-text .text {
  font-size: 1.1111111111vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 160%;
  color: #FFF;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .text-area .top-text .text {
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .text-area .top-text .text {
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .text-area .top-text .text {
    font-size: 1.28vw;
  }
}
.m-header .fv .text-area .recomend-area {
  gap: 2.7777777778vw;
  display: flex;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .text-area .recomend-area {
    gap: 2.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .text-area .recomend-area {
    gap: 66px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .text-area .recomend-area {
    gap: 3.2vw;
  }
}
.m-header .fv .text-area .recomend-area .imgArea {
  width: 8.6805555556vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .text-area .recomend-area .imgArea {
    width: 6.9444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .text-area .recomend-area .imgArea {
    width: 206.25px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .text-area .recomend-area .imgArea {
    width: 10vw;
  }
}
.m-header .fv .text-area .recomend-area .imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.m-header .fv .text-area .link-button {
  width: 41.6666666667vw;
  border-radius: 0.6944444444vw;
  gap: 0.6944444444vw;
  padding: 1.25vw 0;
  box-shadow: 0.2083333333vw 0.2083333333vw 0px #E4721F;
  display: flex;
  background: #F68E1B;
  justify-content: center;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .text-area .link-button {
    width: 33.3333333333vw;
    border-radius: 0.5555555556vw;
    gap: 0.5555555556vw;
    padding: 1vw 0;
    box-shadow: 0.1666666667vw 0.1666666667vw 0px #E4721F;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .text-area .link-button {
    width: 990px;
    border-radius: 16.5px;
    gap: 16.5px;
    padding: 29.7px 0;
    box-shadow: 4.95px 4.95px 0px #E4721F;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .text-area .link-button {
    width: 48vw;
    border-radius: 0.8vw;
    gap: 0.8vw;
    padding: 1.44vw 0;
    box-shadow: 0.24vw 0.24vw 0px #E4721F;
  }
}
.m-header .fv .text-area .link-button .span {
  font-size: 1.6666666667vw;
  line-height: 180%;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 900;
  letter-spacing: 1px;
  color: #FFF;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .text-area .link-button .span {
    font-size: 1.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .text-area .link-button .span {
    font-size: 39.6px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .text-area .link-button .span {
    font-size: 1.92vw;
  }
}
.m-header .fv .text-area .link-button .arrow-img {
  width: 1.3888888889vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .text-area .link-button .arrow-img {
    width: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .text-area .link-button .arrow-img {
    width: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .text-area .link-button .arrow-img {
    width: 1.6vw;
  }
}
.m-header .fv .text-area .link-button .arrow-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.m-header .fv .main-copy {
  width: 31.25vw;
  right: 2.0833333333vw;
  position: absolute;
  bottom: 0;
}
@media screen and (min-width: 1800px) {
  .m-header .fv .main-copy {
    width: 25vw;
    right: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-header .fv .main-copy {
    width: 742.5px;
    right: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .m-header .fv .main-copy {
    width: 36vw;
    right: 2.4vw;
  }
}
.m-header .fv .main-copy .imgArea {
  display: block;
  width: 100%;
}

@media (max-width: 768px) {
  .floating {
    border-radius: 1.3020833333vw;
    width: calc(100% - 2.6041666667vw);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .floating .div {
    flex-direction: row;
    justify-content: center;
    padding: 2.6041666667vw 0;
    border-radius: 1.3020833333vw;
  }
  .floating .div .text-wrapper {
    font-size: 3.125vw;
  }
  .floating .div .span {
    font-size: 3.125vw;
  }
  .floating .imgArea {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.6vw;
    width: 3.3333333333vw;
  }
  .navbar {
    padding: 2.2135416667vw 1.3020833333vw;
    display: none;
  }
  .navbar.fixed-nav {
    display: block;
  }
  .navbar .container .logo-link {
    width: 10.9375vw;
  }
  .navbar .container .div {
    display: none;
  }
  .navbar .container .humberger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 2.0833333333vw;
    width: 2.6041666667vw;
    cursor: pointer;
    position: relative;
  }
  .navbar .container .humberger span {
    display: block;
    width: 100%;
    height: 0.2604166667vw;
    background: #0344A4;
    transition: all 0.3s ease;
    transform-origin: center;
  }
  .navbar .container .humberger span:nth-child(1) {
    position: absolute;
    top: 0;
  }
  .navbar .container .humberger span:nth-child(2) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .navbar .container .humberger span:nth-child(3) {
    position: absolute;
    bottom: 0;
  }
  .navbar .container .humberger.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .navbar .container .humberger.active span:nth-child(2) {
    opacity: 0;
  }
  .navbar .container .humberger.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }
  .m-header .fv {
    padding: 14.3229166667vw 0 5.859375vw;
    height: auto;
    margin-top: 0;
  }
  .m-header .fv .text-area {
    left: 10.4166666667vw;
    gap: 2.6041666667vw;
    position: static;
    transform: translate(0);
  }
  .m-header .fv .text-area .top-text {
    gap: 2.6041666667vw;
    padding: 0 2.6041666667vw;
  }
  .m-header .fv .text-area .top-text .main-title {
    font-size: 3.90625vw;
  }
  .m-header .fv .text-area .top-text .main-title .span {
    font-size: 5.859375vw;
    margin-top: 1.3020833333vw;
    line-height: 140%;
  }
  .m-header .fv .text-area .top-text .text {
    font-size: 2.0833333333vw;
    line-height: 180%;
  }
  .m-header .fv .text-area .recomend-area {
    padding: 0 2.8645833333vw;
    top: -5.2083333333vw;
    gap: 0;
    justify-content: space-between;
    position: relative;
  }
  .m-header .fv .text-area .recomend-area .imgArea {
    width: 26.0416666667vw;
  }
  .m-header .fv .text-area .link-button {
    top: -2.6041666667vw;
    width: calc(100% - 4.6875vw);
    border-radius: 1.3020833333vw;
    padding: 2.34375vw 0;
    box-shadow: 0.390625vw 0.390625vw 0px #E4721F;
    position: relative;
    margin: 0 auto;
  }
  .m-header .fv .text-area .link-button .span {
    font-size: 2.6041666667vw;
  }
  .m-header .fv .text-area .link-button .arrow-img {
    width: 2.6041666667vw;
  }
  .m-header .fv .main-copy {
    display: none;
  }
}
@media (max-width: 450px) {
  .floating {
    border-radius: 2.2222222222vw;
    width: calc(100% - 4.4444444444vw);
  }
  .floating .div {
    padding: 4.4444444444vw 0;
    border-radius: 2.2222222222vw;
  }
  .floating .div .text-wrapper {
    font-size: 5.3333333333vw;
  }
  .floating .div .span {
    font-size: 5.3333333333vw;
  }
  .floating .imgArea {
    right: 2.6666666667vw;
    width: 5.5555555556vw;
  }
  .navbar {
    padding: 3.7777777778vw 2.2222222222vw;
  }
  .navbar .container .logo-link {
    width: 26.6666666667vw;
  }
  .navbar .container .humberger {
    height: 3.5555555556vw;
    width: 4.4444444444vw;
  }
  .m-header .fv {
    padding: 24.4444444444vw 0 10vw;
  }
  .m-header .fv .text-area {
    left: 17.7777777778vw;
    gap: 4.4444444444vw;
  }
  .m-header .fv .text-area .top-text {
    gap: 4.4444444444vw;
    padding: 0 4.4444444444vw;
  }
  .m-header .fv .text-area .top-text .main-title {
    font-size: 4.4444444444vw;
  }
  .m-header .fv .text-area .top-text .main-title .span {
    font-size: 8.8888888889vw;
    margin-top: 2.2222222222vw;
  }
  .m-header .fv .text-area .top-text .text {
    font-size: 3.5555555556vw;
  }
  .m-header .fv .text-area .recomend-area {
    padding: 0 4.8888888889vw;
    top: -8.8888888889vw;
  }
  .m-header .fv .text-area .recomend-area .imgArea {
    width: 25.5555555556vw;
  }
  .m-header .fv .text-area .link-button {
    top: -4.4444444444vw;
    width: calc(100% - 8vw);
    border-radius: 2.2222222222vw;
    padding: 4vw 0;
    box-shadow: 0.6666666667vw 0.6666666667vw 0px #E4721F;
  }
  .m-header .fv .text-area .link-button .span {
    font-size: 4.4444444444vw;
  }
  .m-header .fv .text-area .link-button .arrow-img {
    width: 4.4444444444vw;
  }
}
.front {
  display: flex;
  flex-direction: column;
}
.front .section1 {
  padding: 0.6944444444vw 0;
  overflow: hidden;
}
@media screen and (min-width: 1800px) {
  .front .section1 {
    padding: 0.5555555556vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 {
    padding: 16.5px 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 {
    padding: 0.8vw 0;
  }
}
.front .section1 .article {
  width: 27.0833333333vw;
  border-radius: 0.5555555556vw;
  border: 2px solid #0344A4;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article {
    width: 21.6666666667vw;
    border-radius: 0.4444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article {
    width: 643.5px;
    border-radius: 13.2px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article {
    width: 31.2vw;
    border-radius: 0.64vw;
  }
}
.front .section1 .article .title {
  font-size: 1.1111111111vw;
  padding: 0.6944444444vw 0;
  line-height: 100%;
  font-weight: 700;
  text-align: center;
  color: #FFF;
  background: linear-gradient(90deg, rgb(35, 104, 167) 0%, rgb(15, 49, 77) 100%);
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .title {
    font-size: 0.8888888889vw;
    padding: 0.5555555556vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .title {
    font-size: 26.4px;
    padding: 16.5px 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .title {
    font-size: 1.28vw;
    padding: 0.8vw 0;
  }
}
.front .section1 .article .main-area {
  padding: 0.3472222222vw 0 0.6944444444vw;
  gap: 0.8333333333vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area {
    padding: 0.2777777778vw 0 0.5555555556vw;
    gap: 0.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area {
    padding: 8.25px 0 16.5px;
    gap: 19.8px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area {
    padding: 0.4vw 0 0.8vw;
    gap: 0.96vw;
  }
}
.front .section1 .article .main-area .top-text {
  gap: 0.2777777778vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .top-text {
    gap: 0.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .top-text {
    gap: 6.6px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .top-text {
    gap: 0.32vw;
  }
}
.front .section1 .article .main-area .top-text .text1 {
  display: flex;
  align-items: flex-end;
}
.front .section1 .article .main-area .top-text .text1 .span1 {
  font-size: 1.6666666667vw;
  font-family: "Noto Sans JP", Helvetica;
  line-height: 100%;
  font-weight: 700;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .top-text .text1 .span1 {
    font-size: 1.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .top-text .text1 .span1 {
    font-size: 39.6px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .top-text .text1 .span1 {
    font-size: 1.92vw;
  }
}
.front .section1 .article .main-area .top-text .text1 .span2 {
  font-size: 1.25vw;
  font-family: "Noto Sans JP", Helvetica;
  line-height: 100%;
  font-weight: 400;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .top-text .text1 .span2 {
    font-size: 1vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .top-text .text1 .span2 {
    font-size: 29.7px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .top-text .text1 .span2 {
    font-size: 1.44vw;
  }
}
.front .section1 .article .main-area .top-text .imgArea {
  height: 1.25vw;
  width: 1.6666666667vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .top-text .imgArea {
    height: 1vw;
    width: 1.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .top-text .imgArea {
    height: 29.7px;
    width: 39.6px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .top-text .imgArea {
    height: 1.44vw;
    width: 1.92vw;
  }
}
.front .section1 .article .main-area .top-text .imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .section1 .article .main-area .top-text .text2 {
  display: flex;
  align-items: flex-end;
}
.front .section1 .article .main-area .top-text .text2 .span1 {
  font-size: 2.7777777778vw;
  font-family: "Noto Sans JP", Helvetica;
  line-height: 100%;
  font-weight: 700;
  color: #F47808;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .top-text .text2 .span1 {
    font-size: 2.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .top-text .text2 .span1 {
    font-size: 66px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .top-text .text2 .span1 {
    font-size: 3.2vw;
  }
}
.front .section1 .article .main-area .top-text .text2 .span2 {
  font-size: 1.3888888889vw;
  font-family: "Noto Sans JP", Helvetica;
  line-height: 100%;
  font-weight: 700;
  color: #F47808;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .top-text .text2 .span2 {
    font-size: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .top-text .text2 .span2 {
    font-size: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .top-text .text2 .span2 {
    font-size: 1.6vw;
  }
}
.front .section1 .article .main-area .main-img {
  width: 17.3611111111vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .main-img {
    width: 13.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .main-img {
    width: 412.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .main-img {
    width: 20vw;
  }
}
.front .section1 .article .main-area .bottom-area {
  gap: 0.8333333333vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .bottom-area {
    gap: 0.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .bottom-area {
    gap: 19.8px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .bottom-area {
    gap: 0.96vw;
  }
}
.front .section1 .article .main-area .bottom-area .text1 {
  font-size: 1.25vw;
  font-family: "Noto Sans JP", Helvetica;
  text-align: center;
  font-weight: 400;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .bottom-area .text1 {
    font-size: 1vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .bottom-area .text1 {
    font-size: 29.7px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .bottom-area .text1 {
    font-size: 1.28vw;
  }
}
.front .section1 .article .main-area .bottom-area .text2 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.front .section1 .article .main-area .bottom-area .text2 .span1 {
  font-size: 1.3888888889vw;
  font-family: "Noto Sans JP", Helvetica;
  line-height: 100%;
  font-weight: 900;
  color: #F47808;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .bottom-area .text2 .span1 {
    font-size: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .bottom-area .text2 .span1 {
    font-size: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .bottom-area .text2 .span1 {
    font-size: 1.6vw;
  }
}
.front .section1 .article .main-area .bottom-area .text2 .span2 {
  font-size: 2.0833333333vw;
  font-family: "Noto Sans JP", Helvetica;
  line-height: 100%;
  font-weight: 900;
  color: #F47808;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .bottom-area .text2 .span2 {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .bottom-area .text2 .span2 {
    font-size: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .bottom-area .text2 .span2 {
    font-size: 2.4vw;
  }
}
.front .section1 .article .main-area .bottom-area .text3 {
  font-size: 0.9722222222vw;
  font-family: "Noto Sans JP", Helvetica;
  text-align: center;
  font-weight: 400;
  color: #666666;
}
@media screen and (min-width: 1800px) {
  .front .section1 .article .main-area .bottom-area .text3 {
    font-size: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section1 .article .main-area .bottom-area .text3 {
    font-size: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section1 .article .main-area .bottom-area .text3 {
    font-size: 1.12vw;
  }
}
.front .reason {
  padding: 4.1666666667vw 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
@media screen and (min-width: 1800px) {
  .front .reason {
    padding: 3.3333333333vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason {
    padding: 99px 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason {
    padding: 4.8vw 0;
  }
}
.front .reason .back-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.front .reason .back-img .imgArea {
  display: block;
  width: 100%;
  height: 100%;
}
.front .reason .title-area {
  gap: 1.3888888889vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .reason .title-area {
    gap: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .title-area {
    gap: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .title-area {
    gap: 1.6vw;
  }
}
.front .reason .title-area .span-wrapper1 {
  gap: 0.3472222222vw;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .reason .title-area .span-wrapper1 {
    gap: 0.2777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .title-area .span-wrapper1 {
    gap: 8.25px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .title-area .span-wrapper1 {
    gap: 0.4vw;
  }
}
.front .reason .title-area .span-wrapper1 .imgArea {
  width: 1.1111111111vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .reason .title-area .span-wrapper1 .imgArea {
    width: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .title-area .span-wrapper1 .imgArea {
    width: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .title-area .span-wrapper1 .imgArea {
    width: 1.28vw;
  }
}
.front .reason .title-area .span-wrapper1 .text {
  font-size: 1.25vw;
  letter-spacing: 1px;
  font-weight: 400;
  font-family: "Noto Sans JP", Helvetica;
  color: #FFF;
}
@media screen and (min-width: 1800px) {
  .front .reason .title-area .span-wrapper1 .text {
    font-size: 1vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .title-area .span-wrapper1 .text {
    font-size: 29.7px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .title-area .span-wrapper1 .text {
    font-size: 1.44vw;
  }
}
.front .reason .title-area .span-wrapper1 .text .bold {
  font-size: 1.25vw;
  letter-spacing: 1px;
  font-weight: 700;
  font-family: "Noto Sans JP", Helvetica;
  color: #F68E1B;
}
@media screen and (min-width: 1800px) {
  .front .reason .title-area .span-wrapper1 .text .bold {
    font-size: 1vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .title-area .span-wrapper1 .text .bold {
    font-size: 29.7px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .title-area .span-wrapper1 .text .bold {
    font-size: 1.44vw;
  }
}
.front .reason .title-area .span-wrapper2 {
  font-size: 2.7777777778vw;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 700;
  font-family: "Noto Sans JP", Helvetica;
  color: #FFF;
}
@media screen and (min-width: 1800px) {
  .front .reason .title-area .span-wrapper2 {
    font-size: 2.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .title-area .span-wrapper2 {
    font-size: 66px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .title-area .span-wrapper2 {
    font-size: 3.2vw;
  }
}
.front .reason .title-area .span-wrapper2 span {
  font-size: 4.1666666667vw;
  position: relative;
  letter-spacing: 1px;
  font-weight: 700;
  font-family: "Noto Sans JP", Helvetica;
  color: #F68E1B;
}
@media screen and (min-width: 1800px) {
  .front .reason .title-area .span-wrapper2 span {
    font-size: 3.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .title-area .span-wrapper2 span {
    font-size: 99px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .title-area .span-wrapper2 span {
    font-size: 4.8vw;
  }
}
.front .reason .title-area .span-wrapper2 span::before {
  width: 0.3472222222vw;
  height: 0.3472222222vw;
  content: "";
  position: absolute;
  display: block;
  background: #FFF;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1800px) {
  .front .reason .title-area .span-wrapper2 span::before {
    width: 0.2777777778vw;
    height: 0.2777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .title-area .span-wrapper2 span::before {
    width: 8.25px;
    height: 8.25px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .title-area .span-wrapper2 span::before {
    width: 0.4vw;
    height: 0.4vw;
  }
}
.front .reason .point-area {
  margin-top: 2.7777777778vw;
  gap: 2.6388888889vw;
  display: flex;
}
@media screen and (min-width: 1800px) {
  .front .reason .point-area {
    margin-top: 2.2222222222vw;
    gap: 2.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .point-area {
    margin-top: 66px;
    gap: 62.7px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .point-area {
    margin-top: 3.2vw;
    gap: 3.04vw;
  }
}
.front .reason .point-area .article {
  width: 17.3611111111vw;
  height: 11.8055555556vw;
  gap: 1.3888888889vw;
  border-radius: 0.6944444444vw;
  display: flex;
  flex-direction: column;
  background: #FFF;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 1800px) {
  .front .reason .point-area .article {
    width: 13.8888888889vw;
    height: 9.4444444444vw;
    gap: 1.1111111111vw;
    border-radius: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .point-area .article {
    width: 412.5px;
    height: 280.5px;
    gap: 33px;
    border-radius: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .point-area .article {
    width: 20vw;
    height: 13.6vw;
    gap: 1.6vw;
    border-radius: 0.8vw;
  }
}
.front .reason .point-area .article .imgArea {
  height: 4.4444444444vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .reason .point-area .article .imgArea {
    height: 3.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .point-area .article .imgArea {
    height: 105.6px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .point-area .article .imgArea {
    height: 5.12vw;
  }
}
.front .reason .point-area .article .imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .reason .point-area .article .text {
  font-size: 0.9722222222vw;
  font-family: "Noto Sans JP", Helvetica;
  letter-spacing: 1px;
  line-height: 180%;
  font-weight: 700;
  color: #162330;
  text-align: center;
}
@media screen and (min-width: 1800px) {
  .front .reason .point-area .article .text {
    font-size: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .point-area .article .text {
    font-size: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .point-area .article .text {
    font-size: 1.12vw;
  }
}
.front .reason .text-area {
  margin-top: 1.3888888889vw;
}
@media screen and (min-width: 1800px) {
  .front .reason .text-area {
    margin-top: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .text-area {
    margin-top: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .text-area {
    margin-top: 1.6vw;
  }
}
.front .reason .text-area .text {
  font-size: 2.0833333333vw;
  font-family: "Noto Sans JP", Helvetica;
  letter-spacing: 1px;
  line-height: 180%;
  font-weight: 700;
  color: #FFF;
  text-align: center;
}
@media screen and (min-width: 1800px) {
  .front .reason .text-area .text {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .text-area .text {
    font-size: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .text-area .text {
    font-size: 2.4vw;
  }
}
.front .reason .button-area {
  margin-top: 7.6388888889vw;
  position: relative;
}
@media screen and (min-width: 1800px) {
  .front .reason .button-area {
    margin-top: 6.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .button-area {
    margin-top: 181.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .button-area {
    margin-top: 8.8vw;
  }
}
.front .reason .button-area .hukidashi {
  width: 22.9166666667vw;
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  z-index: 2;
}
@media screen and (min-width: 1800px) {
  .front .reason .button-area .hukidashi {
    width: 18.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .button-area .hukidashi {
    width: 544.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .button-area .hukidashi {
    width: 26.4vw;
  }
}
.front .reason .button-area .hukidashi img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .reason .button-area .link {
  width: 31.25vw;
  border-radius: 0.6944444444vw;
  padding: 1.3888888889vw 0;
  box-shadow: 0.2083333333vw 0.2083333333vw 0px #E4721F;
  font-size: 2.0833333333vw;
  position: relative;
  display: flex;
  background: #F68E1B;
  justify-content: center;
  color: #FFF;
  font-weight: 700;
  font-family: "Noto Sans JP", Helvetica;
  text-align: center;
}
.front .reason .button-area .link .imgArea {
  right: 0.5555555556vw;
  width: 1.9444444444vw;
  height: 1.9444444444vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .reason .button-area .link .imgArea {
    right: 0.4444444444vw;
    width: 1.5555555556vw;
    height: 1.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .reason .button-area .link .imgArea {
    right: 13.2px;
    width: 46.2px;
    height: 46.2px;
  }
}
@media screen and (max-width: 1250px) {
  .front .reason .button-area .link .imgArea {
    right: 0.64vw;
    width: 2.24vw;
    height: 2.24vw;
  }
}
.front .reason .button-area .link .imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .nayami {
  padding: 5.5555555556vw 0;
  gap: 2.7777777778vw;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .nayami {
    padding: 4.4444444444vw 0;
    gap: 2.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .nayami {
    padding: 132px 0;
    gap: 66px;
  }
}
@media screen and (max-width: 1250px) {
  .front .nayami {
    padding: 6.4vw 0;
    gap: 3.2vw;
  }
}
.front .nayami .back-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.front .nayami .back-img .imgArea {
  display: block;
  width: 100%;
  height: 100%;
}
.front .nayami .title-img {
  display: block;
  width: 76.3888888889vw;
}
@media screen and (min-width: 1800px) {
  .front .nayami .title-img {
    width: 61.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .nayami .title-img {
    width: 1815px;
  }
}
@media screen and (max-width: 1250px) {
  .front .nayami .title-img {
    width: 88vw;
  }
}
.front .nayami .title-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .nayami .text-area {
  width: 83.3333333333vw;
  height: 41.6666666667vw;
  display: block;
  position: relative;
}
@media screen and (min-width: 1800px) {
  .front .nayami .text-area {
    width: 66.6666666667vw;
    height: 33.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .nayami .text-area {
    width: 1980px;
    height: 990px;
  }
}
@media screen and (max-width: 1250px) {
  .front .nayami .text-area {
    width: 96vw;
    height: 48vw;
  }
}
.front .nayami .text-area .text-img1 {
  width: 33.3333333333vw;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .nayami .text-area .text-img1 {
    width: 26.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .nayami .text-area .text-img1 {
    width: 792px;
  }
}
@media screen and (max-width: 1250px) {
  .front .nayami .text-area .text-img1 {
    width: 38.4vw;
  }
}
.front .nayami .text-area .text-img2 {
  width: 42.3611111111vw;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .nayami .text-area .text-img2 {
    width: 33.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .nayami .text-area .text-img2 {
    width: 1006.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .nayami .text-area .text-img2 {
    width: 48.8vw;
  }
}
.front .nayami .text-area .text-img3 {
  width: 27.7777777778vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .nayami .text-area .text-img3 {
    width: 22.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .nayami .text-area .text-img3 {
    width: 660px;
  }
}
@media screen and (max-width: 1250px) {
  .front .nayami .text-area .text-img3 {
    width: 32vw;
  }
}
.front .aistaznara .top-img {
  display: block;
  width: 100%;
}
.front .section2 {
  margin-top: 4.1666666667vw;
  gap: 4.1666666667vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section2 {
    margin-top: 3.3333333333vw;
    gap: 3.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section2 {
    margin-top: 99px;
    gap: 99px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section2 {
    margin-top: 4.8vw;
    gap: 4.8vw;
  }
}
.front .section2 .content-wrapper {
  width: 76.3888888889vw;
  gap: 2.4305555556vw;
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 1800px) {
  .front .section2 .content-wrapper {
    width: 61.1111111111vw;
    gap: 1.9444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section2 .content-wrapper {
    width: 1815px;
    gap: 57.75px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section2 .content-wrapper {
    width: 88vw;
    gap: 2.8vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section2 .content-wrapper {
    width: 143.2291666667vw;
    gap: 4.5572916667vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section2 .content-wrapper {
    width: 244.4444444444vw;
    gap: 7.7777777778vw;
  }
}
.front .section2 .content-wrapper .wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;
}
.front .section2 .content-wrapper .wrapper .top-area {
  gap: 0.8333333333vw;
  padding: 1.6666666667vw;
  border: 1px solid;
  border-color: #4a4a4a;
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media screen and (min-width: 1800px) {
  .front .section2 .content-wrapper .wrapper .top-area {
    gap: 0.6666666667vw;
    padding: 1.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section2 .content-wrapper .wrapper .top-area {
    gap: 19.8px;
    padding: 39.6px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section2 .content-wrapper .wrapper .top-area {
    gap: 0.96vw;
    padding: 1.92vw;
  }
}
.front .section2 .content-wrapper .wrapper .top-area .text-wrapper {
  font-size: 0.9722222222vw;
  height: 6.25vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  color: #162330;
  letter-spacing: 1px;
  line-height: 180%;
  text-align: justify;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section2 .content-wrapper .wrapper .top-area .text-wrapper {
    font-size: 0.7777777778vw;
    height: 5vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section2 .content-wrapper .wrapper .top-area .text-wrapper {
    font-size: 23.1px;
    height: 148.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section2 .content-wrapper .wrapper .top-area .text-wrapper {
    font-size: 1.12vw;
    height: 7.2vw;
  }
}
.front .section2 .content-wrapper .wrapper .top-area .imgArea {
  display: block;
  width: 100%;
}
.front .section2 .content-wrapper .wrapper .top-area .imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .section2 .content-wrapper .wrapper .arrow {
  height: 4.8611111111vw;
  width: 100%;
}
@media screen and (min-width: 1800px) {
  .front .section2 .content-wrapper .wrapper .arrow {
    height: 3.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section2 .content-wrapper .wrapper .arrow {
    height: 115.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section2 .content-wrapper .wrapper .arrow {
    height: 5.6vw;
  }
}
.front .section2 .content-wrapper .wrapper .arrow .imgArea {
  display: block;
  width: 100%;
}
.front .section2 .content-wrapper .wrapper .bottom-area {
  padding: 1.6666666667vw;
  border: 1px solid #0344A4;
  height: 100%;
}
@media screen and (min-width: 1800px) {
  .front .section2 .content-wrapper .wrapper .bottom-area {
    padding: 1.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section2 .content-wrapper .wrapper .bottom-area {
    padding: 39.6px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section2 .content-wrapper .wrapper .bottom-area {
    padding: 1.92vw;
  }
}
.front .section2 .content-wrapper .wrapper .bottom-area .imgArea {
  height: 9.7222222222vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .section2 .content-wrapper .wrapper .bottom-area .imgArea {
    height: 7.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section2 .content-wrapper .wrapper .bottom-area .imgArea {
    height: 231px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section2 .content-wrapper .wrapper .bottom-area .imgArea {
    height: 11.2vw;
  }
}
.front .section2 .content-wrapper .wrapper .bottom-area .imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-2 {
  margin-top: 2.0833333333vw;
  padding: 0.6944444444vw 0;
  font-size: 1.5277777778vw;
  line-height: 180%;
  letter-spacing: 1px;
  text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.2509803922);
  font-family: "Noto Sans JP", Helvetica;
  color: #F1E03A;
  text-align: center;
  background: #0F314D;
}
@media screen and (min-width: 1800px) {
  .front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-2 {
    margin-top: 1.6666666667vw;
    padding: 0.5555555556vw 0;
    font-size: 1.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-2 {
    margin-top: 49.5px;
    padding: 16.5px 0;
    font-size: 36.3px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-2 {
    margin-top: 2.4vw;
    padding: 0.8vw 0;
    font-size: 1.76vw;
  }
}
.front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-3 {
  margin-top: 0.6944444444vw;
  font-size: 1.1111111111vw;
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  text-align: justify;
}
@media screen and (min-width: 1800px) {
  .front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-3 {
    margin-top: 0.5555555556vw;
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-3 {
    margin-top: 16.5px;
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-3 {
    margin-top: 0.8vw;
    font-size: 1.28vw;
  }
}
.front .taikenkai {
  margin-top: 5.5555555556vw;
}
@media screen and (min-width: 1800px) {
  .front .taikenkai {
    margin-top: 4.4444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .taikenkai {
    margin-top: 132px;
  }
}
@media screen and (max-width: 1250px) {
  .front .taikenkai {
    margin-top: 6.4vw;
  }
}
.front .taikenkai .top-area {
  display: flex;
  justify-content: space-between;
}
.front .taikenkai .top-area .left-img {
  width: 47.2222222222vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .taikenkai .top-area .left-img {
    width: 50%;
  }
}
@media screen and (min-width: 2200px) {
  .front .taikenkai .top-area .left-img {
    width: 1122px;
  }
}
@media screen and (max-width: 1250px) {
  .front .taikenkai .top-area .left-img {
    width: 54.4vw;
  }
}
.front .taikenkai .top-area .text-area {
  width: 51.3888888889vw;
  gap: 0.6944444444vw;
  padding: 0.6944444444vw 1.3888888889vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .taikenkai .top-area .text-area {
    width: 50%;
    gap: 0.5555555556vw;
    padding: 0.5555555556vw 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .taikenkai .top-area .text-area {
    width: 1221px;
    gap: 16.5px;
    padding: 16.5px 33px;
  }
}
@media screen and (max-width: 1250px) {
  .front .taikenkai .top-area .text-area {
    width: 59.2vw;
    gap: 0.8vw;
    padding: 0.8vw 1.6vw;
  }
}
.front .taikenkai .top-area .text-area .imgArea {
  display: block;
  width: 100%;
}
.front .taikenkai .top-area .text-area .imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .taikenkai .middle-area {
  padding: 1.3888888889vw 0;
  background: #F68E1B;
}
@media screen and (min-width: 1800px) {
  .front .taikenkai .middle-area {
    padding: 1.1111111111vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .taikenkai .middle-area {
    padding: 33px 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .taikenkai .middle-area {
    padding: 1.6vw 0;
  }
}
.front .taikenkai .middle-area .text {
  font-size: 2.0833333333vw;
  line-height: 180%;
  letter-spacing: 1px;
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
}
@media screen and (min-width: 1800px) {
  .front .taikenkai .middle-area .text {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .taikenkai .middle-area .text {
    font-size: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .taikenkai .middle-area .text {
    font-size: 2.4vw;
  }
}
.front .taikenkai .middle-area .text .big {
  font-size: 3.4722222222vw;
  line-height: 180%;
  letter-spacing: 1px;
  font-weight: 700;
}
@media screen and (min-width: 1800px) {
  .front .taikenkai .middle-area .text .big {
    font-size: 2.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .taikenkai .middle-area .text .big {
    font-size: 82.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .taikenkai .middle-area .text .big {
    font-size: 4vw;
  }
}
.front .section7 {
  gap: 4.1666666667vw;
  padding-bottom: 4.1666666667vw;
  margin-top: 4.1666666667vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section7 {
    gap: 3.3333333333vw;
    padding-bottom: 3.3333333333vw;
    margin-top: 3.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section7 {
    gap: 99px;
    padding-bottom: 99px;
    margin-top: 99px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section7 {
    gap: 4.8vw;
    padding-bottom: 4.8vw;
    margin-top: 4.8vw;
  }
}
.front .section7 .content {
  gap: 2.7777777778vw;
  width: 76.3888888889vw;
  display: flex;
}
@media screen and (min-width: 1800px) {
  .front .section7 .content {
    gap: 2.2222222222vw;
    width: 61.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section7 .content {
    gap: 66px;
    width: 1815px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section7 .content {
    gap: 3.2vw;
    width: 88vw;
  }
}
.front .section7 .content .imgArea {
  width: 34.7222222222vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .section7 .content .imgArea {
    width: 27.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section7 .content .imgArea {
    width: 825px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section7 .content .imgArea {
    width: 40vw;
  }
}
.front .section7 .content .text {
  font-size: 1.1111111111vw;
  flex: 1;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 1px;
  text-align: justify;
}
@media screen and (min-width: 1800px) {
  .front .section7 .content .text {
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section7 .content .text {
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section7 .content .text {
    font-size: 1.28vw;
  }
}
.front .section7 .content .text .span {
  font-size: 1.1111111111vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 1px;
  color: #0344A4;
}
@media screen and (min-width: 1800px) {
  .front .section7 .content .text .span {
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section7 .content .text .span {
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section7 .content .text .span {
    font-size: 1.28vw;
  }
}
.front .section7 .content .text .daihyo {
  margin: 0.6944444444vw;
  font-size: 1.1111111111vw;
  display: block;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 1px;
  text-align: right;
}
@media screen and (min-width: 1800px) {
  .front .section7 .content .text .daihyo {
    margin: 0.5555555556vw;
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section7 .content .text .daihyo {
    margin: 16.5px;
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section7 .content .text .daihyo {
    margin: 0.8vw;
    font-size: 1.28vw;
  }
}
.front .cta {
  padding: 5.5555555556vw 0;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 1800px) {
  .front .cta {
    padding: 4.4444444444vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta {
    padding: 132px 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta {
    padding: 6.4vw 0;
  }
}
.front .cta .back-img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.front .cta .back-img .imgArea {
  display: block;
  width: 100%;
  height: 100%;
}
.front .cta .back-img .imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  vertical-align: bottom;
}
.front .cta .main-text {
  width: 48.6111111111vw;
  margin: 0 auto;
  text-align: center;
}
@media screen and (min-width: 1800px) {
  .front .cta .main-text {
    width: 38.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .main-text {
    width: 1155px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .main-text {
    width: 56vw;
  }
}
.front .cta .main-text .imgArea {
  width: 21.5277777778vw;
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 1800px) {
  .front .cta .main-text .imgArea {
    width: 17.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .main-text .imgArea {
    width: 511.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .main-text .imgArea {
    width: 24.8vw;
  }
}
.front .cta .main-text .span {
  font-size: 3.4722222222vw;
  font-family: "Noto Sans JP", Helvetica;
  color: #FFF;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 1px;
}
@media screen and (min-width: 1800px) {
  .front .cta .main-text .span {
    font-size: 2.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .main-text .span {
    font-size: 82.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .main-text .span {
    font-size: 4vw;
  }
}
.front .cta .text-area {
  padding: 3.4722222222vw 0;
  margin-top: 2.7777777778vw;
  border-radius: 2.7777777778vw;
  width: 48.6111111111vw;
  background: #FFF;
  margin: 0 auto;
}
@media screen and (min-width: 1800px) {
  .front .cta .text-area {
    padding: 2.7777777778vw 0;
    margin-top: 2.2222222222vw;
    border-radius: 2.2222222222vw;
    width: 38.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .text-area {
    padding: 82.5px 0;
    margin-top: 66px;
    border-radius: 66px;
    width: 1155px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .text-area {
    padding: 4vw 0;
    margin-top: 3.2vw;
    border-radius: 3.2vw;
    width: 56vw;
  }
}
.front .cta .text-area .text1 {
  font-size: 2.6388888889vw;
  font-family: "Noto Sans JP", Helvetica;
  line-height: 140%;
  letter-spacing: 1px;
  text-align: center;
  font-weight: 700;
  color: #F68E1B;
}
@media screen and (min-width: 1800px) {
  .front .cta .text-area .text1 {
    font-size: 2.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .text-area .text1 {
    font-size: 62.7px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .text-area .text1 {
    font-size: 3.04vw;
  }
}
.front .cta .text-area .text2 {
  margin-top: 0.6944444444vw;
  font-size: 1.1111111111vw;
  font-family: "Noto Sans JP", Helvetica;
  line-height: 180%;
  letter-spacing: 1px;
  text-align: center;
  font-weight: 400;
  color: #162330;
}
@media screen and (min-width: 1800px) {
  .front .cta .text-area .text2 {
    margin-top: 0.5555555556vw;
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .text-area .text2 {
    margin-top: 16.5px;
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .text-area .text2 {
    margin-top: 0.8vw;
    font-size: 1.28vw;
  }
}
.front .cta .text-area .button-area {
  margin-top: 5.5555555556vw;
  position: relative;
}
@media screen and (min-width: 1800px) {
  .front .cta .text-area .button-area {
    margin-top: 4.4444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .text-area .button-area {
    margin-top: 132px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .text-area .button-area {
    margin-top: 6.4vw;
  }
}
.front .cta .text-area .button-area.button-area2 {
  margin-top: 6.5972222222vw;
}
@media screen and (min-width: 1800px) {
  .front .cta .text-area .button-area.button-area2 {
    margin-top: 5.2777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .text-area .button-area.button-area2 {
    margin-top: 156.75px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .text-area .button-area.button-area2 {
    margin-top: 7.6vw;
  }
}
.front .cta .text-area .button-area .hukidashi {
  width: 16.6666666667vw;
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  z-index: 2;
}
@media screen and (min-width: 1800px) {
  .front .cta .text-area .button-area .hukidashi {
    width: 13.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .text-area .button-area .hukidashi {
    width: 396px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .text-area .button-area .hukidashi {
    width: 19.2vw;
  }
}
.front .cta .text-area .button-area .hukidashi img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .cta .text-area .button-area .hukidashi2 {
  width: 22.9166666667vw;
}
@media screen and (min-width: 1800px) {
  .front .cta .text-area .button-area .hukidashi2 {
    width: 18.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .text-area .button-area .hukidashi2 {
    width: 544.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .text-area .button-area .hukidashi2 {
    width: 26.4vw;
  }
}
.front .cta .text-area .button-area .link {
  width: 31.25vw;
  border-radius: 0.6944444444vw;
  padding: 1.3888888889vw 0;
  box-shadow: 0.2083333333vw 0.2083333333vw 0px #E4721F;
  font-size: 2.0833333333vw;
  position: relative;
  display: flex;
  margin: 0 auto;
  background: #F68E1B;
  justify-content: center;
  color: #FFF;
  font-weight: 700;
  font-family: "Noto Sans JP", Helvetica;
  text-align: center;
}
.front .cta .text-area .button-area .link .imgArea {
  right: 0.5555555556vw;
  width: 1.9444444444vw;
  height: 1.9444444444vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .cta .text-area .button-area .link .imgArea {
    right: 0.4444444444vw;
    width: 1.5555555556vw;
    height: 1.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .cta .text-area .button-area .link .imgArea {
    right: 13.2px;
    width: 46.2px;
    height: 46.2px;
  }
}
@media screen and (max-width: 1250px) {
  .front .cta .text-area .button-area .link .imgArea {
    right: 0.64vw;
    width: 2.24vw;
    height: 2.24vw;
  }
}
.front .cta .text-area .button-area .link .imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .section3 {
  padding: 4.1666666667vw 0;
  display: flex;
  justify-content: center;
  background: linear-gradient(181deg, rgb(3, 19, 44) 0%, rgb(41, 71, 105) 100%);
}
@media screen and (min-width: 1800px) {
  .front .section3 {
    padding: 3.3333333333vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .section3 {
    padding: 99px 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .section3 {
    padding: 4.8vw 0;
  }
}
.front .section3 .container {
  width: 76.3888888889vw;
  gap: 4.1666666667vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section3 .container {
    width: 61.1111111111vw;
    gap: 3.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section3 .container {
    width: 1815px;
    gap: 99px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section3 .container {
    width: 88vw;
    gap: 4.8vw;
  }
}
.front .section3 .container .section-title {
  font-size: 3.4722222222vw;
  text-align: center;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 1px;
  color: #FFF;
}
@media screen and (min-width: 1800px) {
  .front .section3 .container .section-title {
    font-size: 2.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section3 .container .section-title {
    font-size: 82.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section3 .container .section-title {
    font-size: 4vw;
  }
}
.front .section3 .container .article-area {
  gap: 5.5555555556vw 0;
  width: 76.3888888889vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 1800px) {
  .front .section3 .container .article-area {
    gap: 4.4444444444vw 0;
    width: 61.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section3 .container .article-area {
    gap: 132px 0;
    width: 1815px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section3 .container .article-area {
    gap: 6.4vw 0;
    width: 88vw;
  }
}
.front .section3 .container .article-area .article {
  padding: 4.8611111111vw 1.3888888889vw 3.4722222222vw;
  width: calc(50% - 2.0833333333vw);
  gap: 1.3888888889vw;
  position: relative;
  background: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (min-width: 1800px) {
  .front .section3 .container .article-area .article {
    padding: 3.8888888889vw 1.1111111111vw 2.7777777778vw;
    width: calc(50% - 1.6666666667vw);
    gap: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section3 .container .article-area .article {
    padding: 115.5px 33px 82.5px;
    width: calc(50% - 49.5px);
    gap: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section3 .container .article-area .article {
    padding: 5.6vw 1.6vw 4vw;
    width: calc(50% - 2.4vw);
    gap: 1.6vw;
  }
}
.front .section3 .container .article-area .article .point-img {
  left: 0.6944444444vw;
  width: 6.9444444444vw;
  display: block;
  position: absolute;
  bottom: 90%;
}
@media screen and (min-width: 1800px) {
  .front .section3 .container .article-area .article .point-img {
    left: 0.5555555556vw;
    width: 5.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section3 .container .article-area .article .point-img {
    left: 16.5px;
    width: 165px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section3 .container .article-area .article .point-img {
    left: 0.8vw;
    width: 8vw;
  }
}
.front .section3 .container .article-area .article .main-text {
  font-size: 1.6666666667vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  text-align: center;
  color: #162330;
  letter-spacing: 1px;
  line-height: 160%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 1800px) {
  .front .section3 .container .article-area .article .main-text {
    font-size: 1.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section3 .container .article-area .article .main-text {
    font-size: 39.6px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section3 .container .article-area .article .main-text {
    font-size: 1.92vw;
  }
}
.front .section3 .container .article-area .article .main-text .bold {
  font-size: 2.0833333333vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  text-align: center;
  color: #F68E1B;
  letter-spacing: 1px;
  line-height: 160%;
}
@media screen and (min-width: 1800px) {
  .front .section3 .container .article-area .article .main-text .bold {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section3 .container .article-area .article .main-text .bold {
    font-size: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section3 .container .article-area .article .main-text .bold {
    font-size: 2.4vw;
  }
}
.front .section3 .container .article-area .article .main-img {
  display: block;
  width: 100%;
}
.front .section4 {
  gap: 4.1666666667vw;
  margin-top: 5.5555555556vw;
  padding-bottom: 5.5555555556vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section4 {
    gap: 3.3333333333vw;
    margin-top: 4.4444444444vw;
    padding-bottom: 4.4444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 {
    gap: 99px;
    margin-top: 132px;
    padding-bottom: 132px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 {
    gap: 4.8vw;
    margin-top: 6.4vw;
    padding-bottom: 6.4vw;
  }
}
.front .section4 .title-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.front .section4 .title-area .text {
  font-size: 1.1111111111vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 1px;
  text-align: center;
}
@media screen and (min-width: 1800px) {
  .front .section4 .title-area .text {
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .title-area .text {
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .title-area .text {
    font-size: 1.28vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section4 .title-area .text {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section4 .title-area .text {
    font-size: 3.5555555556vw;
  }
}
.front .section4 .article-wrapper {
  width: 83.3333333333vw;
  gap: 4.1666666667vw 2.0833333333vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper {
    width: 66.6666666667vw;
    gap: 3.3333333333vw 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper {
    width: 1980px;
    gap: 99px 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper {
    width: 96vw;
    gap: 4.8vw 2.4vw;
  }
}
.front .section4 .article-wrapper .article {
  padding-top: 3.4722222222vw;
  gap: 0.9027777778vw;
  width: calc(33.3333333333% - 2.0833333333vw);
  position: relative;
  background: #FFF;
  box-shadow: 0px 5px 10px #000000;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article {
    padding-top: 2.7777777778vw;
    gap: 0.7222222222vw;
    width: calc(33.3333333333% - 1.6666666667vw);
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article {
    padding-top: 82.5px;
    gap: 21.45px;
    width: calc(33.3333333333% - 49.5px);
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article {
    padding-top: 4vw;
    gap: 1.04vw;
    width: calc(33.3333333333% - 2.4vw);
  }
}
.front .section4 .article-wrapper .article .icon-img {
  width: 4.8611111111vw;
  height: 4.8611111111vw;
  top: -2.4305555556vw;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article .icon-img {
    width: 3.8888888889vw;
    height: 3.8888888889vw;
    top: -1.9444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article .icon-img {
    width: 115.5px;
    height: 115.5px;
    top: -57.75px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article .icon-img {
    width: 5.6vw;
    height: 5.6vw;
    top: -2.8vw;
  }
}
.front .section4 .article-wrapper .article .top-area {
  gap: 1.3888888889vw;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article .top-area {
    gap: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article .top-area {
    gap: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article .top-area {
    gap: 1.6vw;
  }
}
.front .section4 .article-wrapper .article .top-area .title {
  font-size: 1.25vw;
  padding-bottom: 0.6944444444vw;
  position: relative;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 1px;
  text-align: center;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article .top-area .title {
    font-size: 1vw;
    padding-bottom: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article .top-area .title {
    font-size: 29.7px;
    padding-bottom: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article .top-area .title {
    font-size: 1.44vw;
    padding-bottom: 0.8vw;
  }
}
.front .section4 .article-wrapper .article .top-area .title .bar-img {
  width: 5.5555555556vw;
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article .top-area .title .bar-img {
    width: 4.4444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article .top-area .title .bar-img {
    width: 132px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article .top-area .title .bar-img {
    width: 6.4vw;
  }
}
.front .section4 .article-wrapper .article .top-area .title .bar-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  display: block;
}
.front .section4 .article-wrapper .article .top-area .text {
  padding: 0 0.6944444444vw;
  font-size: 0.9722222222vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 1px;
  text-align: justify;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article .top-area .text {
    padding: 0 0.5555555556vw;
    font-size: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article .top-area .text {
    padding: 0 16.5px;
    font-size: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article .top-area .text {
    padding: 0 0.8vw;
    font-size: 1.12vw;
  }
}
.front .section4 .article-wrapper .article .bottom-area {
  gap: 1.3888888889vw;
  padding: 1.3888888889vw 0.6944444444vw 2.0833333333vw;
  background: #F7F7F7;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article .bottom-area {
    gap: 1.1111111111vw;
    padding: 1.1111111111vw 0.5555555556vw 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article .bottom-area {
    gap: 33px;
    padding: 33px 16.5px 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article .bottom-area {
    gap: 1.6vw;
    padding: 1.6vw 0.8vw 2.4vw;
  }
}
.front .section4 .article-wrapper .article .bottom-area .title {
  font-size: 0.9722222222vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 1px;
  text-align: center;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article .bottom-area .title {
    font-size: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article .bottom-area .title {
    font-size: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article .bottom-area .title {
    font-size: 1.12vw;
  }
}
.front .section4 .article-wrapper .article .bottom-area .list {
  gap: 0.6944444444vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article .bottom-area .list {
    gap: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article .bottom-area .list {
    gap: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article .bottom-area .list {
    gap: 0.8vw;
  }
}
.front .section4 .article-wrapper .article .bottom-area .list li {
  padding-left: 1.8055555556vw;
  font-size: 0.9722222222vw;
  position: relative;
  font-family: "Noto Sans JP", Helvetica;
  line-height: 180%;
  letter-spacing: 1px;
  font-weight: 500;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article .bottom-area .list li {
    padding-left: 1.4444444444vw;
    font-size: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article .bottom-area .list li {
    padding-left: 42.9px;
    font-size: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article .bottom-area .list li {
    padding-left: 2.08vw;
    font-size: 1.12vw;
  }
}
.front .section4 .article-wrapper .article .bottom-area .list li .imgArea {
  width: 1.1111111111vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
@media screen and (min-width: 1800px) {
  .front .section4 .article-wrapper .article .bottom-area .list li .imgArea {
    width: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section4 .article-wrapper .article .bottom-area .list li .imgArea {
    width: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section4 .article-wrapper .article .bottom-area .list li .imgArea {
    width: 1.28vw;
  }
}
.front .section5 {
  padding: 5.5555555556vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section5 {
    padding: 4.4444444444vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 {
    padding: 132px 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 {
    padding: 6.4vw 0;
  }
}
.front .section5 .content-area {
  width: 76.3888888889vw;
  gap: 2.7777777778vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area {
    width: 61.1111111111vw;
    gap: 2.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area {
    width: 1815px;
    gap: 66px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area {
    width: 88vw;
    gap: 3.2vw;
  }
}
.front .section5 .content-area .top-area {
  margin-top: 4.1666666667vw;
  gap: 1.3888888889vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .top-area {
    gap: 1.1111111111vw;
    margin-top: 3.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .top-area {
    gap: 33px;
    margin-top: 99px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .top-area {
    gap: 1.6vw;
    margin-top: 4.8vw;
  }
}
.front .section5 .content-area .top-area .text1 {
  font-size: 2.7777777778vw;
  color: #0F314D;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 180%;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .top-area .text1 {
    font-size: 2.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .top-area .text1 {
    font-size: 66px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .top-area .text1 {
    font-size: 3.2vw;
  }
}
.front .section5 .content-area .top-area .text2 {
  font-size: 1.1111111111vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 180%;
  text-align: center;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .top-area .text2 {
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .top-area .text2 {
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .top-area .text2 {
    font-size: 1.28vw;
  }
}
.front .section5 .content-area .middle-area {
  width: 48.6111111111vw;
  border-radius: 0.6944444444vw;
  display: flex;
  flex-direction: column;
  border: 1px solid #4A4A4A;
  overflow: hidden;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area {
    width: 38.8888888889vw;
    border-radius: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area {
    width: 1155px;
    border-radius: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area {
    width: 56vw;
    border-radius: 0.8vw;
  }
}
.front .section5 .content-area .middle-area .title {
  padding: 0.6944444444vw;
  font-size: 1.9444444444vw;
  text-align: center;
  background: #0F314D;
  color: #FFF;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 180%;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .title {
    padding: 0.5555555556vw;
    font-size: 1.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .title {
    padding: 16.5px;
    font-size: 46.2px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .title {
    padding: 0.8vw;
    font-size: 2.24vw;
  }
}
.front .section5 .content-area .middle-area .price-wrapper .price-area {
  padding: 2.7777777778vw 0;
  gap: 0.9722222222vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  border-bottom: 1px solid #DBDBDB;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area {
    padding: 2.2222222222vw 0;
    gap: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area {
    padding: 66px 0;
    gap: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area {
    padding: 3.2vw 0;
    gap: 1.12vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area {
    padding: 5.2083333333vw 0;
    gap: 1.8229166667vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area {
    padding: 8.8888888889vw 0;
    gap: 3.1111111111vw;
  }
}
.front .section5 .content-area .middle-area .price-wrapper .price-area .price {
  gap: 1.3888888889vw;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price {
    gap: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price {
    gap: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price {
    gap: 1.6vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price {
    gap: 2.6041666667vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price {
    gap: 4.4444444444vw;
  }
}
.front .section5 .content-area .middle-area .price-wrapper .price-area .price .text {
  padding: 0.9722222222vw 1.3888888889vw;
  border-radius: 0.6944444444vw;
  font-size: 1.9444444444vw;
  background: #0F314D;
  color: #FFF;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 180%;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .text {
    padding: 0.7777777778vw 1.1111111111vw;
    border-radius: 0.5555555556vw;
    font-size: 1.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .text {
    padding: 23.1px 33px;
    border-radius: 16.5px;
    font-size: 46.2px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .text {
    padding: 1.12vw 1.6vw;
    border-radius: 0.8vw;
    font-size: 2.24vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .text {
    padding: 1.8229166667vw 2.6041666667vw;
    border-radius: 1.3020833333vw;
    font-size: 3.6458333333vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .text {
    padding: 3.1111111111vw 4.4444444444vw;
    border-radius: 2.2222222222vw;
    font-size: 6.2222222222vw;
  }
}
.front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text {
  gap: 0.6944444444vw;
  display: flex;
  align-items: flex-end;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text {
    gap: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text {
    gap: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text {
    gap: 0.8vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text {
    gap: 1.3020833333vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text {
    gap: 2.2222222222vw;
  }
}
.front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 {
  font-size: 3.4722222222vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 100%;
  color: #000000;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 {
    font-size: 2.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 {
    font-size: 82.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 {
    font-size: 4vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 {
    font-size: 6.5104166667vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 {
    font-size: 11.1111111111vw;
  }
}
.front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 .span {
  font-size: 1.9444444444vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 100%;
  color: #000000;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 .span {
    font-size: 1.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 .span {
    font-size: 46.2px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 .span {
    font-size: 2.24vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 .span {
    font-size: 3.6458333333vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span1 .span {
    font-size: 6.2222222222vw;
  }
}
.front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span2 {
  font-size: 1.0416666667vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 100%;
  color: #000000;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span2 {
    font-size: 0.8333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span2 {
    font-size: 24.75px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span2 {
    font-size: 1.2vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span2 {
    font-size: 1.953125vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .price .price-text .span2 {
    font-size: 3.3333333333vw;
  }
}
.front .section5 .content-area .middle-area .price-wrapper .price-area .bottom-text {
  font-size: 1.1111111111vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 180%;
  color: #000000;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .bottom-text {
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .bottom-text {
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .bottom-text {
    font-size: 1.28vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .bottom-text {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section5 .content-area .middle-area .price-wrapper .price-area .bottom-text {
    font-size: 3.5555555556vw;
  }
}
.front .section5 .content-area .middle-area .price-wrapper .text-wrapper {
  border-bottom: 1px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.front .section5 .content-area .middle-area .price-wrapper .text-wrapper .bottom-text {
  font-size: 0.8333333333vw;
  padding: 0.6944444444vw 0;
  letter-spacing: 1px;
  line-height: 180%;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .price-wrapper .text-wrapper .bottom-text {
    font-size: 0.6666666667vw;
    padding: 0.5555555556vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .price-wrapper .text-wrapper .bottom-text {
    font-size: 0.5454545455vw;
    padding: 0.4545454545vw 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .price-wrapper .text-wrapper .bottom-text {
    font-size: 0.96vw;
    padding: 0.8vw 0;
  }
}
@media screen and (max-width: 767px) {
  .front .section5 .content-area .middle-area .price-wrapper .text-wrapper .bottom-text {
    font-size: 1.5645371578vw;
    padding: 1.3037809648vw 1.3037809648vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section5 .content-area .middle-area .price-wrapper .text-wrapper .bottom-text {
    font-size: 2.6666666667vw;
    padding: 2.2222222222vw 2.2222222222vw;
  }
}
.front .section5 .content-area .middle-area .service-area {
  padding: 2.7777777778vw 1.3888888889vw;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .service-area {
    padding: 2.2222222222vw 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .service-area {
    padding: 66px 33px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .service-area {
    padding: 3.2vw 1.6vw;
  }
}
.front .section5 .content-area .middle-area .service-area .title-text {
  font-size: 1.9444444444vw;
  position: relative;
  font-family: "Noto Sans JP", Helvetica;
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 180%;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .service-area .title-text {
    font-size: 1.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .service-area .title-text {
    font-size: 46.2px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .service-area .title-text {
    font-size: 2.24vw;
  }
}
.front .section5 .content-area .middle-area .service-area .title-text .bar-img {
  width: 10.4166666667vw;
  height: 3px;
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .service-area .title-text .bar-img {
    width: 8.3333333333vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .service-area .title-text .bar-img {
    width: 247.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .service-area .title-text .bar-img {
    width: 12vw;
  }
}
.front .section5 .content-area .middle-area .service-area .title-text .bar-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  display: block;
}
.front .section5 .content-area .middle-area .service-area .list {
  gap: 1.3888888889vw;
  margin-top: 2.0833333333vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .service-area .list {
    gap: 1.1111111111vw;
    margin-top: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .service-area .list {
    gap: 33px;
    margin-top: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .service-area .list {
    gap: 1.6vw;
    margin-top: 2.4vw;
  }
}
.front .section5 .content-area .middle-area .service-area .list li {
  font-size: 1.25vw;
  padding-left: 2.4305555556vw;
  position: relative;
  line-height: 180%;
  font-weight: 700;
  letter-spacing: 1px;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .service-area .list li {
    font-size: 1vw;
    padding-left: 1.9444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .service-area .list li {
    font-size: 29.7px;
    padding-left: 57.75px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .service-area .list li {
    font-size: 1.44vw;
    padding-left: 2.8vw;
  }
}
.front .section5 .content-area .middle-area .service-area .list li .imgArea {
  width: 1.7361111111vw;
  height: 1.7361111111vw;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  left: 0;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .middle-area .service-area .list li .imgArea {
    width: 1.3888888889vw;
    height: 1.3888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .middle-area .service-area .list li .imgArea {
    width: 41.25px;
    height: 41.25px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .middle-area .service-area .list li .imgArea {
    width: 2vw;
    height: 2vw;
  }
}
.front .section5 .content-area .bottom-area {
  margin-top: 2.7777777778vw;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area {
    margin-top: 2.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area {
    margin-top: 66px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area {
    margin-top: 3.2vw;
  }
}
.front .section5 .content-area .bottom-area .text-area {
  gap: 1.3888888889vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .text-area {
    gap: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .text-area {
    gap: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .text-area {
    gap: 1.6vw;
  }
}
.front .section5 .content-area .bottom-area .text-area .text1 {
  font-size: 2.0833333333vw;
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .text-area .text1 {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .text-area .text1 {
    font-size: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .text-area .text1 {
    font-size: 2.4vw;
  }
}
.front .section5 .content-area .bottom-area .text-area .text2 {
  font-size: 3.4722222222vw;
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  text-align: center;
  color: #0F314D;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .text-area .text2 {
    font-size: 2.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .text-area .text2 {
    font-size: 82.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .text-area .text2 {
    font-size: 4vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area {
  margin-top: 0.6944444444vw;
  gap: 1.3888888889vw;
  width: 76.3888888889vw;
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area {
    margin-top: 0.5555555556vw;
    gap: 1.1111111111vw;
    width: 61.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area {
    margin-top: 16.5px;
    gap: 33px;
    width: 1815px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area {
    margin-top: 0.8vw;
    gap: 1.6vw;
    width: 88vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article {
  padding: 1.3888888889vw 0.6944444444vw 1.7361111111vw;
  border-radius: 0 0 0.6944444444vw 0.6944444444vw;
  border-top: 2px solid #0344a4;
  background: #FFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2509803922);
  width: 33.3333333333%;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article {
    padding: 1.1111111111vw 0.5555555556vw 1.3888888889vw;
    border-radius: 0 0 0.5555555556vw 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article {
    padding: 33px 16.5px 41.25px;
    border-radius: 0 0 16.5px 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article {
    padding: 1.6vw 0.8vw 2vw;
    border-radius: 0 0 0.8vw 0.8vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .top-content {
  gap: 0.6944444444vw;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content {
    gap: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content {
    gap: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content {
    gap: 0.8vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .top-content .imgArea {
  width: 4.8611111111vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .imgArea {
    width: 3.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .imgArea {
    width: 115.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .imgArea {
    width: 5.6vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area {
  display: flex;
  flex-direction: column;
}
.front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text1,
.front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
  font-size: 1.25vw;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 180%;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text1,
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
    font-size: 1vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text1,
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
    font-size: 29.7px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text1,
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
    font-size: 1.44vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
  font-size: 0.9722222222vw;
  color: #9A9CAA;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
    font-size: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
    font-size: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
    font-size: 1.12vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .middle-content {
  margin-top: 0.6944444444vw;
  padding: 0.6944444444vw;
  display: flex;
  align-items: center;
  background: #F7F7F7;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content {
    margin-top: 0.5555555556vw;
    padding: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content {
    margin-top: 16.5px;
    padding: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content {
    margin-top: 0.8vw;
    padding: 0.8vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .middle-content .left-text {
  font-size: 0.9722222222vw;
  padding-right: 0.6944444444vw;
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  border-right: 1px solid #DDDDDD;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .left-text {
    font-size: 0.7777777778vw;
    padding-right: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .left-text {
    font-size: 23.1px;
    padding-right: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .left-text {
    font-size: 1.12vw;
    padding-right: 0.8vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list {
  margin-left: 0.6944444444vw;
  padding-left: 1.3888888889vw;
  gap: 0.6944444444vw;
  flex: 1;
  list-style: disc;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list {
    margin-left: 0.5555555556vw;
    padding-left: 1.1111111111vw;
    gap: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list {
    margin-left: 16.5px;
    padding-left: 33px;
    gap: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list {
    margin-left: 0.8vw;
    padding-left: 1.6vw;
    gap: 0.8vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list li {
  font-size: 0.9722222222vw;
  list-style-position: outside;
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list li {
    font-size: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list li {
    font-size: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list li {
    font-size: 1.12vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .bottom-content {
  margin-top: 1.3888888889vw;
  gap: 2.0833333333vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content {
    margin-top: 1.1111111111vw;
    gap: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content {
    margin-top: 33px;
    gap: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content {
    margin-top: 1.6vw;
    gap: 2.4vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .top-text {
  border-radius: 0.3472222222vw;
  padding: 0.6944444444vw;
  font-size: 0.9722222222vw;
  background: #0344A4;
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  color: #FFF;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .top-text {
    border-radius: 0.2777777778vw;
    padding: 0.5555555556vw;
    font-size: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .top-text {
    border-radius: 8.25px;
    padding: 16.5px;
    font-size: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .top-text {
    border-radius: 0.4vw;
    padding: 0.8vw;
    font-size: 1.12vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content {
  gap: 0.6944444444vw;
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content {
    gap: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content {
    gap: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content {
    gap: 0.8vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan {
  padding: 0.6944444444vw 0;
  position: relative;
  border: 2px solid #0344A4;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan {
    padding: 0.5555555556vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan {
    padding: 16.5px 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan {
    padding: 0.8vw 0;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text,
.front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text-recomend {
  top: -1.7361111111vw;
  left: -0.1388888889vw;
  padding: 0.3472222222vw 0.6944444444vw;
  font-size: 0.8333333333vw;
  position: absolute;
  background: #0F314D;
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: #FFF;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text,
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text-recomend {
    top: -1.3888888889vw;
    left: -0.1111111111vw;
    padding: 0.2777777778vw 0.5555555556vw;
    font-size: 0.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text,
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text-recomend {
    top: -41.25px;
    left: -3.3px;
    padding: 8.25px 16.5px;
    font-size: 19.8px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text,
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text-recomend {
    top: -2vw;
    left: -0.16vw;
    padding: 0.4vw 0.8vw;
    font-size: 0.96vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text-recomend {
  border-radius: 0.3472222222vw;
  border: 2px solid #FCDA70;
  background: linear-gradient(180deg, rgb(83, 62, 31) 0%, rgb(91, 77, 51) 100%);
}
.front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .text {
  font-size: 0.9722222222vw;
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  text-align: center;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .text {
    font-size: 0.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .text {
    font-size: 23.1px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .text {
    font-size: 1.12vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan-wrapper {
  gap: 0.6944444444vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan-wrapper {
    gap: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan-wrapper {
    gap: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan-wrapper {
    gap: 0.8vw;
  }
}
.front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan-wrapper .plan-text {
  padding: 0.6944444444vw 0;
  font-size: 0.9722222222vw;
  width: 47.5%;
  border: 1px solid #58CCC3;
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  text-align: center;
}
.front .section5 .content-area .bottom-area .option-area {
  margin-top: 3.4722222222vw;
  width: 76.3888888889vw;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .option-area {
    margin-top: 2.7777777778vw;
    width: 61.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .option-area {
    margin-top: 82.5px;
    width: 1815px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .option-area {
    margin-top: 4vw;
    width: 88vw;
  }
}
.front .section5 .content-area .bottom-area .option-area .text {
  font-size: 2.0833333333vw;
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .option-area .text {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .option-area .text {
    font-size: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .option-area .text {
    font-size: 2.4vw;
  }
}
.front .section5 .content-area .bottom-area .option-area .option {
  margin-top: 2.7777777778vw;
  gap: 1.3888888889vw 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .option-area .option {
    margin-top: 2.2222222222vw;
    gap: 1.1111111111vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .option-area .option {
    margin-top: 66px;
    gap: 33px 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .option-area .option {
    margin-top: 3.2vw;
    gap: 1.6vw 0;
  }
}
.front .section5 .content-area .bottom-area .option-area .option .option-text {
  font-size: 1.6666666667vw;
  padding: 2.7777777778vw 0;
  border-radius: 0.6944444444vw;
  width: calc(33.3333333333% - 1.3888888889vw);
  line-height: 180%;
  letter-spacing: 1px;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  text-align: center;
  background: #0F314D;
  color: #FFF;
}
@media screen and (min-width: 1800px) {
  .front .section5 .content-area .bottom-area .option-area .option .option-text {
    font-size: 1.3333333333vw;
    padding: 2.2222222222vw 0;
    border-radius: 0.5555555556vw;
    width: calc(33.3333333333% - 1.1111111111vw);
  }
}
@media screen and (min-width: 2200px) {
  .front .section5 .content-area .bottom-area .option-area .option .option-text {
    font-size: 39.6px;
    padding: 66px 0;
    border-radius: 16.5px;
    width: calc(33.3333333333% - 33px);
  }
}
@media screen and (max-width: 1250px) {
  .front .section5 .content-area .bottom-area .option-area .option .option-text {
    font-size: 1.92vw;
    padding: 3.2vw 0;
    border-radius: 0.8vw;
    width: calc(33.3333333333% - 1.6vw);
  }
}
.front .section6 {
  padding: 5.5555555556vw;
}
@media screen and (min-width: 1800px) {
  .front .section6 {
    padding: 4.4444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section6 {
    padding: 132px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section6 {
    padding: 6.4vw;
  }
}
.front .section6 .title {
  display: none;
}
.front .section6 .imgArea {
  display: block;
}
.front .section9 {
  gap: 4.1666666667vw;
  padding: 5.5555555556vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1800px) {
  .front .section9 {
    gap: 3.3333333333vw;
    padding: 4.4444444444vw 0;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 {
    gap: 99px;
    padding: 132px 0;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 {
    gap: 4.8vw;
    padding: 6.4vw 0;
  }
}
.front .section9 .content {
  width: 76.3888888889vw;
}
@media screen and (min-width: 1800px) {
  .front .section9 .content {
    width: 61.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 .content {
    width: 1815px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 .content {
    width: 88vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section9 .content {
    width: 143.2291666667vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section9 .content {
    width: 244.4444444444vw;
  }
}
.front .section9 .content .question-area {
  padding: 2.0833333333vw 0;
  gap: 2.0833333333vw;
  border-bottom: 1px solid #0344A4;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .front .section9 .content .question-area {
    padding: 1.6666666667vw 0;
    gap: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 .content .question-area {
    padding: 49.5px 0;
    gap: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 .content .question-area {
    padding: 2.4vw 0;
    gap: 2.4vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section9 .content .question-area {
    padding: 3.90625vw 0;
    gap: 3.90625vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section9 .content .question-area {
    padding: 6.6666666667vw 0;
    gap: 6.6666666667vw;
  }
}
.front .section9 .content .question-area .question {
  gap: 2.0833333333vw;
  display: flex;
  cursor: pointer;
  position: relative;
}
@media screen and (min-width: 1800px) {
  .front .section9 .content .question-area .question {
    gap: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 .content .question-area .question {
    gap: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 .content .question-area .question {
    gap: 2.4vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section9 .content .question-area .question {
    gap: 3.90625vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section9 .content .question-area .question {
    gap: 6.6666666667vw;
  }
}
.front .section9 .content .question-area .question .Q {
  font-size: 1.5277777778vw;
  line-height: 180%;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: #0344A4;
}
@media screen and (min-width: 1800px) {
  .front .section9 .content .question-area .question .Q {
    font-size: 1.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 .content .question-area .question .Q {
    font-size: 36.3px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 .content .question-area .question .Q {
    font-size: 1.76vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section9 .content .question-area .question .Q {
    font-size: 2.8645833333vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section9 .content .question-area .question .Q {
    font-size: 4.8888888889vw;
  }
}
.front .section9 .content .question-area .question .text {
  font-size: 1.5277777778vw;
  flex: 1;
  line-height: 180%;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: #464646;
}
@media screen and (min-width: 1800px) {
  .front .section9 .content .question-area .question .text {
    font-size: 1.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 .content .question-area .question .text {
    font-size: 36.3px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 .content .question-area .question .text {
    font-size: 1.76vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section9 .content .question-area .question .text {
    font-size: 2.8645833333vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section9 .content .question-area .question .text {
    font-size: 4.8888888889vw;
  }
}
.front .section9 .content .question-area .question .imgArea {
  width: 2.0833333333vw;
  display: block;
}
@media screen and (min-width: 1800px) {
  .front .section9 .content .question-area .question .imgArea {
    width: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 .content .question-area .question .imgArea {
    width: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 .content .question-area .question .imgArea {
    width: 2.4vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section9 .content .question-area .question .imgArea {
    width: 3.90625vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section9 .content .question-area .question .imgArea {
    width: 6.6666666667vw;
  }
}
.front .section9 .content .question-area .question .imgArea img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  /* 画像の鮮明さを維持する */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 縮小時にぼやける場合 */
  -webkit-backface-visibility: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}
.front .section9 .content .question-area .question .plus {
  display: block;
}
.front .section9 .content .question-area .question .minus {
  display: none;
}
.front .section9 .content .question-area .question.close .plus {
  display: none;
}
.front .section9 .content .question-area .question.close .minus {
  display: block;
}
.front .section9 .content .question-area .answer {
  gap: 2.0833333333vw;
  display: none;
}
@media screen and (min-width: 1800px) {
  .front .section9 .content .question-area .answer {
    gap: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 .content .question-area .answer {
    gap: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 .content .question-area .answer {
    gap: 2.4vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section9 .content .question-area .answer {
    gap: 3.90625vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section9 .content .question-area .answer {
    gap: 6.6666666667vw;
  }
}
.front .section9 .content .question-area .answer[style*="display: block"] {
  display: flex !important;
}
.front .section9 .content .question-area .answer .A {
  font-size: 1.5277777778vw;
  line-height: 180%;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: #0344A4;
}
@media screen and (min-width: 1800px) {
  .front .section9 .content .question-area .answer .A {
    font-size: 1.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 .content .question-area .answer .A {
    font-size: 36.3px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 .content .question-area .answer .A {
    font-size: 1.76vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section9 .content .question-area .answer .A {
    font-size: 2.8645833333vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section9 .content .question-area .answer .A {
    font-size: 4.8888888889vw;
  }
}
.front .section9 .content .question-area .answer .text {
  font-size: 1.25vw;
  flex: 1;
  line-height: 180%;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 500;
  color: #464646;
}
@media screen and (min-width: 1800px) {
  .front .section9 .content .question-area .answer .text {
    font-size: 1vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 .content .question-area .answer .text {
    font-size: 29.7px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 .content .question-area .answer .text {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section9 .content .question-area .answer .text {
    font-size: 2.34375vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section9 .content .question-area .answer .text {
    font-size: 4vw;
  }
}
.front .section9 .content .question-area .answer .text .blue {
  font-size: 1.25vw;
  line-height: 180%;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  color: #0344A4;
}
@media screen and (min-width: 1800px) {
  .front .section9 .content .question-area .answer .text .blue {
    font-size: 1vw;
  }
}
@media screen and (min-width: 2200px) {
  .front .section9 .content .question-area .answer .text .blue {
    font-size: 29.7px;
  }
}
@media screen and (max-width: 1250px) {
  .front .section9 .content .question-area .answer .text .blue {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 768px) {
  .front .section9 .content .question-area .answer .text .blue {
    font-size: 2.34375vw;
  }
}
@media screen and (max-width: 450px) {
  .front .section9 .content .question-area .answer .text .blue {
    font-size: 4vw;
  }
}

@media (max-width: 768px) {
  .front .section1 {
    padding: 1.3020833333vw 0;
  }
  .front .section1 .article {
    width: 50.78125vw;
    border-radius: 1.0416666667vw;
  }
  .front .section1 .article .title {
    font-size: 2.0833333333vw;
    padding: 1.3020833333vw 0;
  }
  .front .section1 .article .main-area {
    padding: 0.6510416667vw 0 1.0416666667vw;
    gap: 1.5625vw;
  }
  .front .section1 .article .main-area .top-text {
    gap: 0.5208333333vw;
  }
  .front .section1 .article .main-area .top-text .text1 .span1 {
    font-size: 3.125vw;
  }
  .front .section1 .article .main-area .top-text .text1 .span2 {
    font-size: 2.34375vw;
  }
  .front .section1 .article .main-area .top-text .imgArea {
    height: 2.34375vw;
    width: 3.125vw;
  }
  .front .section1 .article .main-area .top-text .text2 .span1 {
    font-size: 5.2083333333vw;
  }
  .front .section1 .article .main-area .top-text .text2 .span2 {
    font-size: 2.6041666667vw;
  }
  .front .section1 .article .main-area .main-img {
    width: 24.7395833333vw;
  }
  .front .section1 .article .main-area .bottom-area {
    gap: 1.5625vw;
  }
  .front .section1 .article .main-area .bottom-area .text1 {
    font-size: 2.0833333333vw;
  }
  .front .section1 .article .main-area .bottom-area .text2 .span1 {
    font-size: 2.6041666667vw;
  }
  .front .section1 .article .main-area .bottom-area .text2 .span2 {
    font-size: 3.90625vw;
  }
  .front .section1 .article .main-area .bottom-area .text3 {
    font-size: 1.8229166667vw;
  }
  .front .reason {
    padding: 7.8125vw 0;
  }
  .front .reason .title-area {
    gap: 2.6041666667vw;
    padding: 0 2.6041666667vw;
  }
  .front .reason .title-area .span-wrapper1 {
    gap: 0.6510416667vw;
  }
  .front .reason .title-area .span-wrapper1 .imgArea {
    width: 3.3854166667vw;
  }
  .front .reason .title-area .span-wrapper1 .text {
    font-size: 2.34375vw;
    text-align: center;
    line-height: 160%;
  }
  .front .reason .title-area .span-wrapper1 .text .bold {
    font-size: 2.34375vw;
  }
  .front .reason .title-area .span-wrapper2 {
    font-size: 5.2083333333vw;
  }
  .front .reason .title-area .span-wrapper2 span {
    font-size: 6.5104166667vw;
  }
  .front .reason .title-area .span-wrapper2 span::before {
    width: 0.6510416667vw;
    height: 0.6510416667vw;
  }
  .front .reason .point-area {
    margin-top: 3.90625vw;
    gap: 2.6041666667vw;
    padding: 0 2.6041666667vw;
    flex-direction: column;
    width: 100%;
  }
  .front .reason .point-area .article {
    width: 32.5520833333vw;
    height: 22.1354166667vw;
    gap: 2.6041666667vw;
    border-radius: 1.3020833333vw;
    padding: 1.8229166667vw 0;
    width: 100%;
    height: auto;
  }
  .front .reason .point-area .article .imgArea {
    width: 10.4166666667vw;
    height: auto;
  }
  .front .reason .point-area .article .text {
    font-size: 2.0833333333vw;
  }
  .front .reason .text-area {
    margin-top: 2.6041666667vw;
  }
  .front .reason .text-area .text {
    font-size: 2.34375vw;
  }
  .front .reason .button-area {
    padding: 0 2.6041666667vw;
    margin-top: 19.53125vw;
    width: 100%;
  }
  .front .reason .button-area .hukidashi {
    width: calc(80% - 5.2083333333vw);
  }
  .front .reason .button-area .link {
    font-size: 24px;
    font-size: 3.125vw;
    width: 58.59375vw;
    border-radius: 1.3020833333vw;
    padding: 2.6041666667vw 0;
    box-shadow: 0.390625vw 0.390625vw 0px #E4721F;
    display: block;
    width: 100%;
  }
  .front .reason .button-area .link .imgArea {
    display: none;
  }
  .front .nayami {
    padding: 7.8125vw 2.6041666667vw;
    gap: 5.2083333333vw;
    overflow: hidden;
  }
  .front .nayami .title-img {
    width: 100%;
  }
  .front .nayami .text-area {
    width: 100%;
    height: auto;
    position: relative;
  }
  .front .nayami .text-area .text-img1 {
    left: -1.953125vw;
    width: 65.1041666667vw;
    position: relative;
  }
  .front .nayami .text-area .text-img2 {
    position: relative;
    margin-top: 4.8177083333vw;
    right: -40%;
    width: 65.1041666667vw;
  }
  .front .nayami .text-area .text-img3 {
    width: 65.1041666667vw;
    left: -3.2552083333vw;
    position: relative;
    margin-top: 0;
    transform: translateX(0);
  }
  .front .section2 {
    margin-top: 5.2083333333vw;
    gap: 5.2083333333vw;
    padding: 0 2.6041666667vw;
  }
.front .section2 .content-wrapper {
    width: 100%;
    flex-direction: column;
    gap: 4.5572916667vw;
  }
  .front .section2 .content-wrapper .wrapper {
    width: 100%;
  }
  .front .section2 .content-wrapper .wrapper .top-area {
    gap: 2.34375vw;
    padding: 3.125vw;
    flex-direction: column;
  }
  .front .section2 .content-wrapper .wrapper .top-area .text-wrapper {
    font-size: 1.8229166667vw;
    width: 100%;
    height: auto;
  }
  .front .section2 .content-wrapper .wrapper .top-area .imgArea {
    width: 100%;
  }
  .front .section2 .content-wrapper .wrapper .arrow {
    height: auto;
  }
  .front .section2 .content-wrapper .wrapper .bottom-area {
    position: static;
    padding: 3.125vw;
  }
  .front .section2 .content-wrapper .wrapper .bottom-area .imgArea {
    width: 10.4166666667vw;
    height: auto;
    margin: 0 auto;
  }
  .front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-2 {
    margin-top: 2.6041666667vw;
    padding: 1.3020833333vw 0;
    font-size: 2.6041666667vw;
  }
  .front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-3 {
    margin-top: 1.3020833333vw;
    font-size: 2.0833333333vw;
  }
  .front .taikenkai {
    margin-top: 7.8125vw;
  }
  .front .taikenkai .top-area {
    gap: 2.6041666667vw;
    flex-direction: column;
  }
  .front .taikenkai .top-area .left-img {
    width: 100%;
  }
  .front .taikenkai .top-area .text-area {
    width: 100%;
    gap: 1.3020833333vw;
    padding: 1.3020833333vw 2.6041666667vw;
  }
  .front .taikenkai .middle-area {
    margin-top: 5.2083333333vw;
    padding: 2.6041666667vw 0;
  }
  .front .taikenkai .middle-area .text {
    font-size: 2.6041666667vw;
  }
  .front .taikenkai .middle-area .text .big {
    font-size: 3.90625vw;
  }
  .front .section7 {
    gap: 5.2083333333vw;
    padding: 0 2.6041666667vw;
    padding-bottom: 5.2083333333vw;
    margin-top: 7.8125vw;
  }
.front .section7 .content {
    gap: 2.6041666667vw;
    width: 100%;
    flex-direction: column;
  }
  .front .section7 .content .imgArea {
    width: 100%;
    height: auto;
  }
  .front .section7 .content .text {
    width: 100%;
    font-size: 2.0833333333vw;
  }
  .front .section7 .content .text .span {
    font-size: 2.0833333333vw;
  }
  .front .section7 .content .text .daihyo {
    margin: 1.3020833333vw;
    font-size: 2.0833333333vw;
  }
  .front .cta {
    padding: 10.4166666667vw 2.6041666667vw;
  }
  .front .cta .main-text {
    width: 100%;
  }
  .front .cta .main-text .imgArea {
    width: 27.34375vw;
  }
  .front .cta .main-text .span {
    font-size: 3.6458333333vw;
    margin-top: 1.3020833333vw;
    display: block;
  }
  .front .cta .text-area {
    padding: 3.90625vw 1.3020833333vw;
    margin-top: 5.2083333333vw;
    border-radius: 5.2083333333vw;
    width: 100%;
  }
  .front .cta .text-area .text1 {
    font-size: 2.6041666667vw;
  }
  .front .cta .text-area .text2 {
    margin-top: 1.3020833333vw;
    font-size: 1.5625vw;
  }
  .front .cta .text-area .button-area {
    margin-top: 14.3229166667vw;
    display: block;
    width: 100%;
  }
  .front .cta .text-area .button-area.button-area2 {
    margin-top: 8.4635416667vw;
  }
  .front .cta .text-area .button-area .hukidashi,
  .front .cta .text-area .button-area .hukidashi2 {
    width: 100%;
  }
  .front .cta .text-area .button-area .link {
    font-size: 3.125vw;
    border-radius: 1.3020833333vw;
    padding: 2.6041666667vw 0;
    box-shadow: 0.390625vw 0.390625vw 0px #E4721F;
    display: block;
    width: 100%;
  }
  .front .cta .text-area .button-area .link .imgArea {
    display: none;
  }
  .front .section3 {
    padding: 5.2083333333vw 0;
  }
  .front .section3 .container {
    width: 100%;
    gap: 7.8125vw;
    padding: 0 2.6041666667vw;
  }
  .front .section3 .container .section-title {
    font-size: 2.6041666667vw;
  }
  .front .section3 .container .article-area {
    gap: 10.4166666667vw;
    flex-direction: column;
    width: 100%;
  }
  .front .section3 .container .article-area .article {
    gap: 2.6041666667vw;
    padding: 9.1145833333vw 2.6041666667vw 6.5104166667vw;
    width: 100%;
    flex-direction: column;
  }
  .front .section3 .container .article-area .article .point-img {
    width: 13.0208333333vw;
    bottom: 87%;
    left: 50%;
    transform: translateX(-50%);
  }
  .front .section3 .container .article-area .article .main-text {
    font-size: 2.0833333333vw;
  }
  .front .section3 .container .article-area .article .main-text .bold {
    font-size: 3.125vw;
  }
  .front .section4 {
    margin-top: 5.2083333333vw;
    padding: 0 2.6041666667vw;
    gap: 7.8125vw;
  }
.front .section4 .article-wrapper {
    gap: 7.8125vw;
    width: 100%;
    flex-direction: column;
  }
  .front .section4 .article-wrapper .article {
    gap: 2.6041666667vw;
    padding-top: 6.5104166667vw;
    width: 100%;
  }
  .front .section4 .article-wrapper .article .icon-img {
    width: 9.1145833333vw;
    height: 9.1145833333vw;
    top: -4.5572916667vw;
  }
  .front .section4 .article-wrapper .article .top-area {
    gap: 2.6041666667vw;
  }
  .front .section4 .article-wrapper .article .top-area .title {
    font-size: 2.34375vw;
    padding-bottom: 1.3020833333vw;
  }
  .front .section4 .article-wrapper .article .top-area .title .bar-img {
    width: 10.4166666667vw;
  }
  .front .section4 .article-wrapper .article .top-area .text {
    padding: 0 1.3020833333vw;
    font-size: 1.8229166667vw;
  }
  .front .section4 .article-wrapper .article .bottom-area {
    gap: 2.6041666667vw;
    padding: 2.6041666667vw 1.3020833333vw 3.90625vw;
    padding-bottom: 5.2083333333vw;
  }
  .front .section4 .article-wrapper .article .bottom-area .title {
    font-size: 1.8229166667vw;
  }
  .front .section4 .article-wrapper .article .bottom-area .list {
    gap: 1.3020833333vw;
  }
  .front .section4 .article-wrapper .article .bottom-area .list li {
    padding-left: 3.3854166667vw;
    font-size: 1.8229166667vw;
  }
  .front .section4 .article-wrapper .article .bottom-area .list li .imgArea {
    width: 2.0833333333vw;
  }
  .front .section5 {
    gap: 2.6041666667vw;
    padding: 0 2.6041666667vw;
    padding-bottom: 7.8125vw;
    margin-top: 13.0208333333vw;
  }
.front .section5 .content-area {
    gap: 2.6041666667vw;
    width: 100%;
  }
  .front .section5 .content-area .top-area {
    gap: 1.3020833333vw;
    margin-top: 0;
  }
  .front .section5 .content-area .top-area .text1 {
    font-size: 2.6041666667vw;
  }
  .front .section5 .content-area .top-area .text2 {
    font-size: 2.0833333333vw;
  }
  .front .section5 .content-area .middle-area {
    border-radius: 1.3020833333vw;
    width: 100%;
  }
  .front .section5 .content-area .middle-area .title {
    padding: 1.3020833333vw;
    font-size: 3.6458333333vw;
  }
  .front .section5 .content-area .middle-area .price-area {
    padding: 2.6041666667vw 0;
    gap: 0;
  }
  .front .section5 .content-area .middle-area .price-area .price {
    gap: 0;
    flex-direction: column;
  }
  .front .section5 .content-area .middle-area .price-area .price .text {
    padding: 1.8229166667vw 2.6041666667vw;
    border-radius: 1.3020833333vw;
    font-size: 2.6041666667vw;
  }
  .front .section5 .content-area .middle-area .price-area .price .price-text {
    padding: 2.8645833333vw 0;
    gap: 1.3020833333vw;
  }
  .front .section5 .content-area .middle-area .price-area .price .price-text .span1 {
    font-size: 6.5104166667vw;
  }
  .front .section5 .content-area .middle-area .price-area .price .price-text .span1 .span {
    font-size: 3.6458333333vw;
  }
  .front .section5 .content-area .middle-area .price-area .price .price-text .span2 {
    font-size: 1.953125vw;
  }
  .front .section5 .content-area .middle-area .bottom-text {
    font-size: 2.0833333333vw;
  }
  .front .section5 .content-area .middle-area .service-area {
    padding: 5.2083333333vw 2.6041666667vw;
  }
  .front .section5 .content-area .middle-area .service-area .title-text {
    font-size: 2.6041666667vw;
  }
  .front .section5 .content-area .middle-area .service-area .title-text .bar-img {
    width: 19.53125vw;
  }
  .front .section5 .content-area .middle-area .service-area .list {
    gap: 2.6041666667vw;
    margin-top: 3.90625vw;
  }
  .front .section5 .content-area .middle-area .service-area .list li {
    font-size: 2.0833333333vw;
    padding-left: 4.5572916667vw;
  }
  .front .section5 .content-area .middle-area .service-area .list li .imgArea {
    width: 3.2552083333vw;
    height: 3.2552083333vw;
  }
  .front .section5 .content-area .bottom-area {
    margin-top: 0;
    padding: 0 2.6041666667vw;
    width: 100%;
  }
  .front .section5 .content-area .bottom-area .text-area {
    gap: 1.3020833333vw;
  }
  .front .section5 .content-area .bottom-area .text-area .text1 {
    font-size: 2.0833333333vw;
  }
  .front .section5 .content-area .bottom-area .text-area .text2 {
    font-size: 2.34375vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area {
    margin-top: 1.3020833333vw;
    gap: 2.6041666667vw;
    flex-direction: column;
    width: 100%;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article {
    width: 100%;
    padding: 2.6041666667vw 1.3020833333vw;
    border-radius: 0 0 1.3020833333vw 1.3020833333vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content {
    gap: 1.3020833333vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .imgArea {
    width: 9.1145833333vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text1,
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
    font-size: 2.34375vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
    font-size: 1.8229166667vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content {
    margin-top: 1.3020833333vw;
    padding: 1.3020833333vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .left-text {
    font-size: 1.8229166667vw;
    padding-right: 1.3020833333vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list {
    margin-left: 1.3020833333vw;
    padding-left: 2.6041666667vw;
    gap: 1.3020833333vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list li {
    font-size: 1.8229166667vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content {
    margin-top: 2.6041666667vw;
    gap: 3.90625vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .top-text {
    border-radius: 0.6510416667vw;
    padding: 1.3020833333vw;
    font-size: 1.8229166667vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content {
    gap: 1.3020833333vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan {
    padding: 1.3020833333vw 0;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text,
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text-recomend {
    top: -3.2552083333vw;
    left: -0.2604166667vw;
    padding: 0.6510416667vw 1.3020833333vw;
    font-size: 1.5625vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text-recomend {
    border-radius: 0.6510416667vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .text {
    font-size: 1.8229166667vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan-wrapper {
    gap: 1.3020833333vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan-wrapper .plan-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.3020833333vw 0;
    font-size: 1.8229166667vw;
  }
  .front .section5 .content-area .bottom-area .option-area {
    width: 100%;
    margin-top: 3.90625vw;
  }
  .front .section5 .content-area .bottom-area .option-area .text {
    font-size: 2.6041666667vw;
  }
  .front .section5 .content-area .bottom-area .option-area .option {
    margin-top: 2.6041666667vw;
    gap: 1.3020833333vw;
    flex-direction: column;
  }
  .front .section5 .content-area .bottom-area .option-area .option .option-text {
    width: 100%;
    padding: 2.6041666667vw;
    font-size: 2.34375vw;
    border-radius: 1.3020833333vw;
  }
  .front .section6 {
    padding: 5.2083333333vw 2.6041666667vw;
    overflow: hidden;
  }
  .front .section6 .title-area {
    display: block;
  }
  .front .section6 .title-area .title {
    display: block;
    font-size: 3.90625vw;
    padding: 1.3020833333vw 2.6041666667vw;
    width: 100%;
    display: block;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 900;
    color: #FFF;
    text-align: center;
    letter-spacing: 1px;
    line-height: 180%;
    background: #0F314D;
  }
  .front .section6 .img-wrapper {
    margin-top: 2.6041666667vw;
    width: 100%;
    overflow: scroll;
  }
  .front .section6 .img-wrapper .imgArea {
    width: 100%;
  }
  .front .section9 {
    gap: 5.2083333333vw;
    padding: 7.8125vw 2.6041666667vw;
  }
  .front .section9 .content-area {
    width: 100%;
  }
  .front .section9 .content-area .content {
    width: 100%;
  }
  .front .section9 .content-area .content .question-area {
    padding: 2.6041666667vw 0;
    gap: 2.6041666667vw;
  }
  .front .section9 .content-area .content .question-area .question {
    gap: 1.953125vw;
    align-items: center;
  }
  .front .section9 .content-area .content .question-area .question .Q {
    font-size: 2.34375vw;
  }
  .front .section9 .content-area .content .question-area .question .text {
    font-size: 2.0833333333vw;
  }
  .front .section9 .content-area .content .question-area .question .imgArea {
    width: 2.6041666667vw;
  }
  .front .section9 .content-area .content .question-area .answer {
    gap: 1.953125vw;
  }
  .front .section9 .content-area .content .question-area .answer .A {
    font-size: 2.34375vw;
  }
  .front .section9 .content-area .content .question-area .answer .text {
    font-size: 2.0833333333vw;
  }
  .front .section9 .content-area .content .question-area .answer .text .blue {
    font-size: 2.0833333333vw;
  }
}
@media (max-width: 450px) {
  .front .section1 {
    padding: 2.2222222222vw 0;
  }
  .front .section1 .article {
    width: 86.6666666667vw;
    border-radius: 1.7777777778vw;
  }
  .front .section1 .article .title {
    font-size: 3.5555555556vw;
    padding: 2.2222222222vw 0;
  }
  .front .section1 .article .main-area {
    padding: 1.1111111111vw 0 1.7777777778vw;
    gap: 2.6666666667vw;
  }
  .front .section1 .article .main-area .top-text {
    gap: 0.8888888889vw;
  }
  .front .section1 .article .main-area .top-text .text1 .span1 {
    font-size: 4.4444444444vw;
  }
  .front .section1 .article .main-area .top-text .text1 .span2 {
    font-size: 3.5555555556vw;
  }
  .front .section1 .article .main-area .top-text .imgArea {
    height: 4vw;
    width: 5.3333333333vw;
  }
  .front .section1 .article .main-area .top-text .text2 .span1 {
    font-size: 6.6666666667vw;
  }
  .front .section1 .article .main-area .top-text .text2 .span2 {
    font-size: 3.5555555556vw;
  }
  .front .section1 .article .main-area .main-img {
    width: 42.2222222222vw;
  }
  .front .section1 .article .main-area .bottom-area {
    gap: 2.6666666667vw;
  }
  .front .section1 .article .main-area .bottom-area .text1 {
    font-size: 3.5555555556vw;
  }
  .front .section1 .article .main-area .bottom-area .text2 .span1 {
    font-size: 4vw;
  }
  .front .section1 .article .main-area .bottom-area .text2 .span2 {
    font-size: 5.3333333333vw;
  }
  .front .section1 .article .main-area .bottom-area .text3 {
    font-size: 2.6666666667vw;
  }
  .front .reason {
    padding: 13.3333333333vw 0;
  }
  .front .reason .title-area {
    gap: 4.4444444444vw;
    padding: 0 4.4444444444vw;
  }
  .front .reason .title-area .span-wrapper1 {
    gap: 1.1111111111vw;
  }
  .front .reason .title-area .span-wrapper1 .imgArea {
    width: 5.7777777778vw;
  }
  .front .reason .title-area .span-wrapper1 .text {
    font-size: 4vw;
  }
  .front .reason .title-area .span-wrapper1 .text .bold {
    font-size: 4vw;
  }
  .front .reason .title-area .span-wrapper2 {
    font-size: 8.8888888889vw;
  }
  .front .reason .title-area .span-wrapper2 span {
    font-size: 11.1111111111vw;
  }
  .front .reason .title-area .span-wrapper2 span::before {
    width: 1.1111111111vw;
    height: 1.1111111111vw;
  }
  .front .reason .point-area {
    margin-top: 6.6666666667vw;
    gap: 4.4444444444vw;
    padding: 0 4.4444444444vw;
  }
  .front .reason .point-area .article {
    width: 100%;
    min-height: 37.7777777778vw;
    gap: 4.4444444444vw;
    border-radius: 2.2222222222vw;
    padding: 3.1111111111vw 0;
  }
  .front .reason .point-area .article .imgArea {
    width: 80px;
  }
  .front .reason .point-area .article .text {
    font-size: 3.5555555556vw;
  }
  .front .reason .text-area {
    margin-top: 4.4444444444vw;
  }
  .front .reason .text-area .text {
    font-size: 4vw;
  }
  .front .reason .button-area {
    padding: 0 4.4444444444vw;
    margin-top: 24.4444444444vw;
  }
  .front .reason .button-area .hukidashi {
    width: calc(100% - 8.8888888889vw);
  }
  .front .reason .button-area .link {
    font-size: 5.3333333333vw;
    border-radius: 2.2222222222vw;
    padding: 4.4444444444vw 0;
    box-shadow: 0.6666666667vw 0.6666666667vw 0px #E4721F;
  }
  .front .nayami {
    padding: 13.3333333333vw 4.4444444444vw;
    gap: 8.8888888889vw;
  }
  .front .nayami .text-area .text-img1 {
    left: -3.3333333333vw;
    width: 73.3333333333vw;
  }
  .front .nayami .text-area .text-img2 {
    margin-top: 8.2222222222vw;
    right: -10%;
    width: 87.7777777778vw;
  }
  .front .nayami .text-area .text-img3 {
    width: 66.6666666667vw;
    left: -5.5555555556vw;
  }
  .front .section2 {
    margin-top: 8.8888888889vw;
    gap: 8.8888888889vw;
    padding: 0 4.4444444444vw;
  }
.front .section2 .content-wrapper {
    gap: 7.7777777778vw;
  }
  .front .section2 .content-wrapper .wrapper .top-area {
    gap: 4vw;
    padding: 5.3333333333vw;
  }
  .front .section2 .content-wrapper .wrapper .top-area .text-wrapper {
    font-size: 3.1111111111vw;
  }
  .front .section2 .content-wrapper .wrapper .bottom-area {
    padding: 5.3333333333vw;
  }
  .front .section2 .content-wrapper .wrapper .bottom-area .imgArea {
    width: 17.7777777778vw;
  }
  .front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-2 {
    margin-top: 4.4444444444vw;
    padding: 2.2222222222vw 0;
    font-size: 4.4444444444vw;
  }
  .front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-3 {
    margin-top: 2.2222222222vw;
    font-size: 3.5555555556vw;
  }
  .front .taikenkai {
    margin-top: 13.3333333333vw;
  }
  .front .taikenkai .top-area {
    gap: 4.4444444444vw;
  }
  .front .taikenkai .top-area .text-area {
    gap: 2.2222222222vw;
    padding: 2.2222222222vw 4.4444444444vw;
  }
  .front .taikenkai .middle-area {
    margin-top: 8.8888888889vw;
    padding: 4.4444444444vw 0;
  }
  .front .taikenkai .middle-area .text {
    font-size: 4.4444444444vw;
  }
  .front .taikenkai .middle-area .text .big {
    font-size: 6.6666666667vw;
  }
  .front .section7 {
    gap: 8.8888888889vw;
    padding: 0 4.4444444444vw;
    padding-bottom: 8.8888888889vw;
    margin-top: 13.3333333333vw;
  }
.front .section7 .content {
    gap: 4.4444444444vw;
  }
  .front .section7 .content .text {
    font-size: 3.5555555556vw;
  }
  .front .section7 .content .text .span {
    font-size: 3.5555555556vw;
  }
  .front .section7 .content .text .daihyo {
    margin: 2.2222222222vw;
    font-size: 3.5555555556vw;
  }
  .front .cta {
    padding: 17.7777777778vw 4.4444444444vw;
  }
  .front .cta .main-text .imgArea {
    width: 46.6666666667vw;
  }
  .front .cta .main-text .span {
    font-size: 6.2222222222vw;
    margin-top: 2.2222222222vw;
  }
  .front .cta .text-area {
    padding: 6.6666666667vw 2.2222222222vw;
    margin-top: 8.8888888889vw;
    border-radius: 8.8888888889vw;
  }
  .front .cta .text-area .text1 {
    font-size: 4.4444444444vw;
  }
  .front .cta .text-area .text2 {
    margin-top: 2.2222222222vw;
    font-size: 2.6666666667vw;
  }
  .front .cta .text-area .button-area {
    margin-top: 24.4444444444vw;
  }
  .front .cta .text-area .button-area.button-area2 {
    margin-top: 17.7777777778vw;
  }
  .front .cta .text-area .button-area .link {
    font-size: 5.3333333333vw;
    border-radius: 2.2222222222vw;
    padding: 4.4444444444vw 0;
    box-shadow: 0.6666666667vw 0.6666666667vw 0px #E4721F;
  }
  .front .cta .text-area .button-area .hukidashi,
  .front .cta .text-area .button-area .hukidashi2 {
    width: 80%;
  }
  .front .section3 {
    padding: 8.8888888889vw 0;
  }
  .front .section3 .container {
    gap: 13.3333333333vw;
    padding: 0 4.4444444444vw;
  }
  .front .section3 .container .section-title {
    font-size: 4.4444444444vw;
  }
  .front .section3 .container .article-area {
    gap: 17.7777777778vw;
  }
  .front .section3 .container .article-area .article {
    gap: 4.4444444444vw;
    padding: 15.5555555556vw 4.4444444444vw 11.1111111111vw;
  }
  .front .section3 .container .article-area .article .point-img {
    width: 90px;
  }
  .front .section3 .container .article-area .article .main-text {
    font-size: 3.5555555556vw;
  }
  .front .section3 .container .article-area .article .main-text .bold {
    font-size: 5.3333333333vw;
  }
  .front .section4 {
    margin-top: 8.8888888889vw;
    padding: 0 4.4444444444vw;
    gap: 13.3333333333vw;
  }
.front .section4 .article-wrapper {
    gap: 13.3333333333vw;
  }
  .front .section4 .article-wrapper .article {
    gap: 4.4444444444vw;
    padding-top: 11.1111111111vw;
  }
  .front .section4 .article-wrapper .article .icon-img {
    width: 70px;
    height: 70px;
    top: -7.7777777778vw;
  }
  .front .section4 .article-wrapper .article .top-area {
    gap: 4.4444444444vw;
  }
  .front .section4 .article-wrapper .article .top-area .title {
    font-size: 4vw;
    padding-bottom: 2.2222222222vw;
  }
  .front .section4 .article-wrapper .article .top-area .title .bar-img {
    width: 17.7777777778vw;
  }
  .front .section4 .article-wrapper .article .top-area .text {
    padding: 0 2.2222222222vw;
    font-size: 3.1111111111vw;
  }
  .front .section4 .article-wrapper .article .bottom-area {
    gap: 4.4444444444vw;
    padding: 4.4444444444vw 2.2222222222vw 6.6666666667vw;
    padding-bottom: 8.8888888889vw;
  }
  .front .section4 .article-wrapper .article .bottom-area .title {
    font-size: 3.1111111111vw;
  }
  .front .section4 .article-wrapper .article .bottom-area .list {
    gap: 2.2222222222vw;
  }
  .front .section4 .article-wrapper .article .bottom-area .list li {
    padding-left: 5.7777777778vw;
    font-size: 3.1111111111vw;
  }
  .front .section4 .article-wrapper .article .bottom-area .list li .imgArea {
    width: 3.5555555556vw;
  }
  .front .section5 {
    gap: 4.4444444444vw;
    padding: 0 4.4444444444vw;
    padding-bottom: 13.3333333333vw;
    margin-top: 22.2222222222vw;
  }
.front .section5 .content-area {
    gap: 4.4444444444vw;
  }
  .front .section5 .content-area .top-area {
    gap: 2.2222222222vw;
  }
  .front .section5 .content-area .top-area .text1 {
    font-size: 4.4444444444vw;
  }
  .front .section5 .content-area .top-area .text2 {
    font-size: 3.5555555556vw;
  }
  .front .section5 .content-area .middle-area {
    border-radius: 2.2222222222vw;
  }
  .front .section5 .content-area .middle-area .title {
    padding: 2.2222222222vw;
    font-size: 6.2222222222vw;
  }
  .front .section5 .content-area .middle-area .price-area {
    padding: 4.4444444444vw 0;
  }
  .front .section5 .content-area .middle-area .price-area .price .text {
    padding: 3.1111111111vw 4.4444444444vw;
    border-radius: 2.2222222222vw;
    font-size: 4.4444444444vw;
  }
  .front .section5 .content-area .middle-area .price-area .price .price-text {
    padding: 4.8888888889vw 0;
    gap: 2.2222222222vw;
  }
  .front .section5 .content-area .middle-area .price-area .price .price-text .span1 {
    font-size: 11.1111111111vw;
  }
  .front .section5 .content-area .middle-area .price-area .price .price-text .span1 .span {
    font-size: 6.2222222222vw;
  }
  .front .section5 .content-area .middle-area .price-area .price .price-text .span2 {
    font-size: 3.3333333333vw;
  }
  .front .section5 .content-area .middle-area .bottom-text {
    font-size: 3.5555555556vw;
  }
  .front .section5 .content-area .middle-area .service-area {
    padding: 8.8888888889vw 4.4444444444vw;
  }
  .front .section5 .content-area .middle-area .service-area .title-text {
    font-size: 4.4444444444vw;
  }
  .front .section5 .content-area .middle-area .service-area .title-text .bar-img {
    width: 33.3333333333vw;
  }
  .front .section5 .content-area .middle-area .service-area .list {
    gap: 4.4444444444vw;
    margin-top: 6.6666666667vw;
  }
  .front .section5 .content-area .middle-area .service-area .list li {
    font-size: 3.5555555556vw;
    padding-left: 7.7777777778vw;
  }
  .front .section5 .content-area .middle-area .service-area .list li .imgArea {
    width: 5.5555555556vw;
    height: 5.5555555556vw;
  }
  .front .section5 .content-area .bottom-area {
    padding: 0 4.4444444444vw;
  }
  .front .section5 .content-area .bottom-area .text-area {
    gap: 2.2222222222vw;
  }
  .front .section5 .content-area .bottom-area .text-area .text1 {
    font-size: 3.5555555556vw;
  }
  .front .section5 .content-area .bottom-area .text-area .text2 {
    font-size: 4vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area {
    margin-top: 2.2222222222vw;
    gap: 4.4444444444vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article {
    padding: 4.4444444444vw 2.2222222222vw;
    border-radius: 0 0 2.2222222222vw 2.2222222222vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content {
    gap: 2.2222222222vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .imgArea {
    width: 15.5555555556vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text1,
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
    font-size: 4vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .top-content .right-area .text2 {
    font-size: 3.1111111111vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content {
    margin-top: 2.2222222222vw;
    padding: 2.2222222222vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .left-text {
    font-size: 3.1111111111vw;
    padding-right: 2.2222222222vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list {
    margin-left: 2.2222222222vw;
    padding-left: 4.4444444444vw;
    gap: 2.2222222222vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .middle-content .list li {
    font-size: 3.1111111111vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content {
    margin-top: 4.4444444444vw;
    gap: 6.6666666667vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .top-text {
    border-radius: 1.1111111111vw;
    padding: 2.2222222222vw;
    font-size: 3.1111111111vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content {
    gap: 2.2222222222vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan {
    padding: 2.2222222222vw 0;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text,
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text-recomend {
    top: -5.5555555556vw;
    left: -0.4444444444vw;
    padding: 1.1111111111vw 2.2222222222vw;
    font-size: 2.6666666667vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .plan-text-recomend {
    border-radius: 1.1111111111vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan .text {
    font-size: 3.1111111111vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan-wrapper {
    gap: 2.2222222222vw;
  }
  .front .section5 .content-area .bottom-area .main-content-area .article .bottom-content .plan-content .plan-wrapper .plan-text {
    padding: 2.2222222222vw 0;
    font-size: 3.1111111111vw;
  }
  .front .section5 .content-area .bottom-area .option-area {
    width: 100%;
    margin-top: 6.6666666667vw;
  }
  .front .section5 .content-area .bottom-area .option-area .text {
    font-size: 4.4444444444vw;
  }
  .front .section5 .content-area .bottom-area .option-area .option {
    margin-top: 4.4444444444vw;
    gap: 2.2222222222vw;
    flex-direction: column;
  }
  .front .section5 .content-area .bottom-area .option-area .option .option-text {
    width: 100%;
    padding: 4.4444444444vw;
    font-size: 4vw;
    border-radius: 2.2222222222vw;
  }
  .front .section6 {
    padding: 8.8888888889vw 4.4444444444vw;
    overflow: hidden;
  }
  .front .section6 .title-area {
    display: block;
  }
  .front .section6 .title-area .title {
    display: block;
    font-size: 6.6666666667vw;
    padding: 2.2222222222vw 4.4444444444vw;
  }
  .front .section6 .img-wrapper {
    margin-top: 8.8888888889vw;
  }
  .front .section6 .img-wrapper .imgArea {
    width: 100%;
  }
  .front .section9 {
    gap: 8.8888888889vw;
    padding: 13.3333333333vw 4.4444444444vw;
  }
  .front .section9 .content-area .content .question-area {
    padding: 4.4444444444vw 0;
    gap: 4.4444444444vw;
  }
  .front .section9 .content-area .content .question-area .question {
    gap: 3.3333333333vw;
  }
  .front .section9 .content-area .content .question-area .question .Q {
    font-size: 4vw;
  }
  .front .section9 .content-area .content .question-area .question .text {
    font-size: 3.5555555556vw;
  }
  .front .section9 .content-area .content .question-area .question .imgArea {
    width: 4.4444444444vw;
  }
  .front .section9 .content-area .content .question-area .answer {
    gap: 3.3333333333vw;
  }
  .front .section9 .content-area .content .question-area .answer .A {
    font-size: 4vw;
  }
  .front .section9 .content-area .content .question-area .answer .text {
    font-size: 3.5555555556vw;
  }
  .front .section9 .content-area .content .question-area .answer .text .blue {
    font-size: 3.5555555556vw;
  }
}
.m-footer {
  padding: 2.7777777778vw 0 5.5555555556vw;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 1800px) {
  .m-footer {
    padding: 2.2222222222vw 0 4.4444444444vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer {
    padding: 66px 0 132px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer {
    padding: 3.2vw 0 6.4vw;
  }
}
.m-footer .footer-area {
  width: 83.3333333333vw;
  gap: 2.7777777778vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area {
    width: 66.6666666667vw;
    gap: 2.2222222222vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area {
    width: 1980px;
    gap: 66px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area {
    width: 96vw;
    gap: 3.2vw;
  }
}
.m-footer .footer-area .top-area {
  gap: 1.3888888889vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .top-area {
    gap: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .top-area {
    gap: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .top-area {
    gap: 1.6vw;
  }
}
.m-footer .footer-area .top-area .span {
  font-size: 0.8333333333vw;
  font-weight: 500;
  color: #000;
  font-family: "Noto Sans JP", Helvetica;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .top-area .span {
    font-size: 0.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .top-area .span {
    font-size: 19.8px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .top-area .span {
    font-size: 0.96vw;
  }
}
.m-footer .footer-area .top-area .imgArea {
  display: block;
  width: 2.0833333333vw;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .top-area .imgArea {
    width: 1.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .top-area .imgArea {
    width: 49.5px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .top-area .imgArea {
    width: 2.4vw;
  }
}
.m-footer .footer-area .bottom-area {
  display: flex;
  justify-content: space-between;
}
.m-footer .footer-area .bottom-area .left-area .imgArea {
  display: block;
  width: 22.2222222222vw;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .bottom-area .left-area .imgArea {
    width: 17.7777777778vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .bottom-area .left-area .imgArea {
    width: 528px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .bottom-area .left-area .imgArea {
    width: 25.6vw;
  }
}
.m-footer .footer-area .bottom-area .left-area .copy {
  margin-top: 0.6944444444vw;
  font-size: 1.1111111111vw;
  display: block;
  font-weight: 400;
  color: #000;
  font-family: "Noto Sans JP", Helvetica;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .bottom-area .left-area .copy {
    margin-top: 0.5555555556vw;
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .bottom-area .left-area .copy {
    margin-top: 16.5px;
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .bottom-area .left-area .copy {
    margin-top: 0.8vw;
    font-size: 1.28vw;
  }
}
.m-footer .footer-area .bottom-area .left-area .bottomArea {
  margin-top: 0.6944444444vw;
  gap: 0.6944444444vw;
  display: flex;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .bottom-area .left-area .bottomArea {
    margin-top: 0.5555555556vw;
    gap: 0.5555555556vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .bottom-area .left-area .bottomArea {
    margin-top: 16.5px;
    gap: 16.5px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .bottom-area .left-area .bottomArea {
    margin-top: 0.8vw;
    gap: 0.8vw;
  }
}
.m-footer .footer-area .bottom-area .left-area .bottomArea a {
  font-size: 0.8333333333vw;
  text-decoration: underline;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 400;
  color: #000000;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .bottom-area .left-area .bottomArea a {
    font-size: 0.6666666667vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .bottom-area .left-area .bottomArea a {
    font-size: 19.8px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .bottom-area .left-area .bottomArea a {
    font-size: 0.96vw;
  }
}
.m-footer .footer-area .bottom-area .right-area .list {
  gap: 1.3888888889vw;
  display: flex;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .bottom-area .right-area .list {
    gap: 1.1111111111vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .bottom-area .right-area .list {
    gap: 33px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .bottom-area .right-area .list {
    gap: 1.6vw;
  }
}
.m-footer .footer-area .bottom-area .right-area .list a {
  font-size: 1.1111111111vw;
  font-weight: 400;
  color: #000;
  font-family: "Noto Sans JP", Helvetica;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .bottom-area .right-area .list a {
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .bottom-area .right-area .list a {
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .bottom-area .right-area .list a {
    font-size: 1.28vw;
  }
}
.m-footer .footer-area .bottom-area .right-area .imgArea {
  display: none;
}
.m-footer .footer-area .bottom-area .right-area .text {
  margin-top: 1.3888888889vw;
  font-size: 1.1111111111vw;
  font-weight: 400;
  color: #000;
  font-family: "Noto Sans JP", Helvetica;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .bottom-area .right-area .text {
    margin-top: 1.1111111111vw;
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .bottom-area .right-area .text {
    margin-top: 33px;
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .bottom-area .right-area .text {
    margin-top: 1.6vw;
    font-size: 1.28vw;
  }
}
.m-footer .footer-area .bottom-area .right-area .text a {
  font-size: 1.1111111111vw;
  font-weight: 400;
  color: #000;
  text-decoration: underline;
  font-family: "Noto Sans JP", Helvetica;
}
@media screen and (min-width: 1800px) {
  .m-footer .footer-area .bottom-area .right-area .text a {
    font-size: 0.8888888889vw;
  }
}
@media screen and (min-width: 2200px) {
  .m-footer .footer-area .bottom-area .right-area .text a {
    font-size: 26.4px;
  }
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .bottom-area .right-area .text a {
    font-size: 1.28vw;
  }
}
.m-footer .footer-area .bottom-area .right-area .bottomArea {
  display: none;
}
.m-footer .footer-area .bottom-area .right-area .copy {
  display: none;
}

@media (max-width: 768px) {
  .m-footer {
    padding: 5.2083333333vw 2.6041666667vw 10.4166666667vw;
  }
  .m-footer .footer-area {
    flex-direction: column-reverse;
    width: 100%;
    padding: 0 2.6041666667vw;
    gap: 5.2083333333vw;
  }
  .m-footer .footer-area .top-area {
    gap: 2.6041666667vw;
  }
  .m-footer .footer-area .top-area .span {
    font-size: 1.5625vw;
  }
  .m-footer .footer-area .top-area .imgArea {
    width: 3.90625vw;
  }
  .m-footer .footer-area .bottom-area {
    gap: 2.6041666667vw;
    width: 100%;
    flex-direction: column;
  }
  .m-footer .footer-area .bottom-area .left-area {
    width: 100%;
    display: none;
  }
  .m-footer .footer-area .bottom-area .left-area .copy {
    display: none;
  }
  .m-footer .footer-area .bottom-area .right-area .list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.6041666667vw 7.8125vw;
  }
  .m-footer .footer-area .bottom-area .right-area .list li {
    text-align: center;
  }
  .m-footer .footer-area .bottom-area .right-area .list a {
    font-size: 2.0833333333vw;
  }
  .m-footer .footer-area .bottom-area .right-area .imgArea {
    margin: 2.6041666667vw auto;
    display: block;
    width: 80%;
  }
  .m-footer .footer-area .bottom-area .right-area .text {
    margin-top: 2.6041666667vw;
    font-size: 2.0833333333vw;
  }
  .m-footer .footer-area .bottom-area .right-area .text a {
    font-size: 2.0833333333vw;
  }
  .m-footer .footer-area .bottom-area .right-area .bottomArea {
    margin: 2.6041666667vw 0 1.3020833333vw;
    gap: 1.3020833333vw;
    display: flex;
    justify-content: center;
  }
  .m-footer .footer-area .bottom-area .right-area .bottomArea a {
    font-size: 1.5625vw;
    text-decoration: underline;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 400;
    color: #000000;
  }
  .m-footer .footer-area .bottom-area .right-area .copy {
    display: block;
    margin-top: 1.3020833333vw;
    font-size: 2.0833333333vw;
    font-weight: 400;
    color: #000;
    font-family: "Noto Sans JP", Helvetica;
    text-align: center;
  }
}
@media (max-width: 450px) {
  .m-footer {
    padding: 8.8888888889vw 4.4444444444vw 17.7777777778vw;
  }
  .m-footer .footer-area {
    padding: 0 4.4444444444vw;
    gap: 8.8888888889vw;
  }
  .m-footer .footer-area .top-area {
    gap: 4.4444444444vw;
  }
  .m-footer .footer-area .top-area .span {
    font-size: 2.6666666667vw;
  }
  .m-footer .footer-area .top-area .imgArea {
    width: 6.6666666667vw;
  }
  .m-footer .footer-area .bottom-area {
    gap: 4.4444444444vw;
  }
  .m-footer .footer-area .bottom-area .right-area .list {
    gap: 4.4444444444vw 13.3333333333vw;
  }
  .m-footer .footer-area .bottom-area .right-area .list a {
    font-size: 3.5555555556vw;
  }
  .m-footer .footer-area .bottom-area .right-area .imgArea {
    margin: 4.4444444444vw auto;
  }
  .m-footer .footer-area .bottom-area .right-area .text {
    margin-top: 4.4444444444vw;
    font-size: 3.5555555556vw;
    text-align: center;
  }
  .m-footer .footer-area .bottom-area .right-area .text a {
    font-size: 3.5555555556vw;
  }
  .m-footer .footer-area .bottom-area .right-area .bottomArea {
    margin: 4.4444444444vw 0 2.2222222222vw;
    gap: 2.2222222222vw;
  }
  .m-footer .footer-area .bottom-area .right-area .bottomArea a {
    font-size: 2.6666666667vw;
  }
  .m-footer .footer-area .bottom-area .right-area .copy {
    margin-top: 2.2222222222vw;
    font-size: 3.5555555556vw;
  }
}
html,
body {
  background: #FFF;
}

@media screen and (min-width: 768px) {
  html {
    font-size: 0.685vw;
  }
}
@media (min-width: 1600px) {
  html {
    font-size: 62.5%;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 1vw;
  }
}
@media (max-width: 500px) {
  html {
    font-size: 2vw;
  }
}/*# sourceMappingURL=style.css.map */
/* ============ 導入事例モーダル / 企業ロゴ帯（打ち合わせ②反映） ============ */
.case-detail-btn {
  margin: 16px auto 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 22px;
  font-size: 15px;
  font-weight: 700;
  color: #16324f;
  background: #fff;
  border: 2px solid #16324f;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.case-detail-btn:hover { background: #16324f; color: #fff; }
.case-detail-btn span { font-weight: 400; }

/* 企業ロゴ帯 */
.client-logos {
  padding: 40px 0;
  background: #f4f7fa;
  overflow: hidden;
}
.client-logos__label {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #5b6b7b;
  margin-bottom: 20px;
  letter-spacing: .04em;
}
.client-logos__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: client-logos-scroll 32s linear infinite;
}
/* ロゴは縦横比がバラバラ（9.5:1の横長〜0.5:1の縦長）なので、
   セル幅は中身に応じて可変にし、高さだけを揃える */
.client-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 120px;
  height: 88px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #e1e8ef;
  border-radius: 8px;
}
.client-logo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 190px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 768px) {
  .client-logos {
    padding: 32px 0;
  }
  .client-logos__label {
    font-size: 13px;
  }
  .client-logos__track {
    gap: 12px;
  }
  .client-logo {
    min-width: 96px;
    height: 68px;
    padding: 9px 12px;
  }
  .client-logo img {
    max-width: 140px;
  }
}
@keyframes client-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* モーダル */
html.modal-open, body.modal-open { overflow: hidden; }
.case-modal { display: none; }
.case-modal.is-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.case-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 34, .6);
}
.case-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 92vw);
  max-height: 88vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  overflow: hidden;
}
.case-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  font-size: 26px;
  line-height: 1;
  color: #16324f;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.case-modal__scroll {
  max-height: 88vh;
  overflow-y: auto;
  padding: 40px 36px 36px;
  -webkit-overflow-scrolling: touch;
}
.case-modal__industry {
  font-size: 14px;
  font-weight: 700;
  color: #f68e1b;
  margin-bottom: 6px;
}
.case-modal__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #16324f;
  margin-bottom: 20px;
}
.case-modal__metrics {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.case-modal__metrics .metric {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  background: #f4f7fa;
  border-radius: 10px;
}
.case-modal__metrics .num {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: #16324f;
}
.case-modal__metrics .lbl {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #5b6b7b;
}
.case-modal__block { margin-bottom: 20px; }
.case-modal__block h4 {
  font-size: 16px;
  font-weight: 700;
  color: #16324f;
  padding-left: 12px;
  border-left: 4px solid #f68e1b;
  margin-bottom: 8px;
}
.case-modal__block p,
.case-modal__block li {
  font-size: 15px;
  line-height: 1.8;
  color: #33475b;
}
.case-modal__block ul { list-style: none; padding: 0; }
.case-modal__block li { position: relative; padding-left: 20px; }
.case-modal__block li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #f68e1b;
  font-weight: 700;
}
.case-modal__voice {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: #eef4fb;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.8;
  color: #33475b;
}
.case-modal__voice cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 13px;
  color: #5b6b7b;
  text-align: right;
}
.case-modal__cta {
  display: block;
  text-align: center;
  padding: 15px;
  background: #f68e1b;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #e4721f;
  text-decoration: none;
}
.case-modal__note {
  margin-top: 14px;
  font-size: 12px;
  color: #9aa8b6;
  text-align: center;
}
@media (max-width: 768px) {
  .case-modal__scroll { padding: 36px 20px 24px; }
  .case-modal__title { font-size: 19px; }
  .case-modal__metrics { flex-direction: column; }
}

/* ============ 資料請求・お問い合わせ（#contact） ============ */
.section-contact {
  padding: 0 0 72px;
  background: #f4f7fa;
}

/* セクション見出し：他セクションと同じ紺帯 */
.contact-inner {
  width: min(680px, 92vw);
  margin: 0 auto;
}

.contact-lead {
  margin: 32px 0 24px;
  font-size: 16px;
  line-height: 1.9;
  color: #33475b;
  text-align: center;
}
.contact-lead strong {
  font-weight: 700;
  color: #16324f;
}

.contact-card {
  padding: 40px 36px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}

.contact-form .form-group {
  margin-bottom: 22px;
}

.contact-form .form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #16324f;
}

.contact-form .required {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #f68e1b;
  border-radius: 4px;
  vertical-align: middle;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 14px;
  /* 16px未満だとiOSで自動ズームが起きるため下げない */
  font-size: 16px;
  font-family: "Noto Sans JP", Helvetica;
  color: #162330;
  background: #fff;
  border: 1px solid #e1e8ef;
  border-radius: 8px;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #9aa8b6;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #f68e1b;
  box-shadow: 0 0 0 3px rgba(246, 142, 27, .15);
}
/* セレクト（役職・会社規模） */
.contact-form select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239aa8b6' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
/* 未選択のあいだはプレースホルダ色にする */
.contact-form select:invalid,
.contact-form select.is-placeholder {
  color: #9aa8b6;
}

.contact-form textarea {
  line-height: 1.7;
  resize: vertical;
}

/* ご希望の対応（ラジオ） */
.contact-form .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-form .radio-item {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  /* ラジオを絶対配置にして、左右を同じ余白にすることで
     テキストがボックスの真ん中に来るようにする */
  padding: 13px 40px;
  font-size: 15px;
  font-weight: 700;
  color: #33475b;
  background: #fff;
  border: 2px solid #e1e8ef;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.contact-form .radio-item:hover {
  border-color: #f68e1b;
}
.contact-form .radio-item input[type="radio"] {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #f68e1b;
  cursor: pointer;
}
.contact-form .radio-item:has(input[type="radio"]:checked) {
  border-color: #f68e1b;
  background: #fff7ee;
  color: #16324f;
}

/* 送信ボタン：既存CTAと同じオレンジ＋ハードシャドウ */
.contact-submit {
  display: block;
  width: 100%;
  margin-top: 32px;
  padding: 17px;
  font-family: "Noto Sans JP", Helvetica;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: #f68e1b;
  border: none;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #e4721f;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.contact-submit:hover {
  background: #f47808;
}
.contact-submit:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #e4721f;
}
.contact-submit:disabled {
  background: #9aa8b6;
  box-shadow: 3px 3px 0 #8b98a6;
  cursor: default;
}
.contact-submit .arrow {
  margin-left: 4px;
  font-weight: 400;
}

.contact-note {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.8;
  color: #5b6b7b;
  text-align: center;
}
.contact-note a {
  color: #0344A4;
  text-decoration: underline;
}

/* 送信完了メッセージ */
.contact-thanks {
  padding: 32px 24px;
  background: #eef4fb;
  border-radius: 10px;
  text-align: center;
}
.contact-thanks__title {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #16324f;
}
.contact-thanks__text {
  font-size: 15px;
  line-height: 1.9;
  color: #33475b;
}

.contact-mail {
  margin-top: 24px;
  font-size: 14px;
  color: #5b6b7b;
  text-align: center;
}
.contact-mail a {
  font-weight: 700;
  color: #0344A4;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .section-contact {
    padding: 0 0 48px;
  }
.contact-inner {
    width: min(680px, 90vw);
  }
  .contact-lead {
    margin: 24px 0 20px;
    font-size: 14px;
    text-align: left;
  }
  .contact-card {
    padding: 28px 20px;
  }
  .contact-form .radio-group {
    flex-direction: column;
  }
  .contact-form .radio-item {
    min-width: 0;
  }
  .contact-submit {
    margin-top: 24px;
    font-size: 16px;
  }
  .contact-thanks {
    padding: 24px 18px;
  }
  .contact-thanks__title {
    font-size: 18px;
  }
  .contact-thanks__text {
    font-size: 14px;
    text-align: left;
  }
}

/* ============ 料金体系（#price / 事業概要資料の実価格に差し替え） ============ */
.section5 .price-inner {
  width: min(880px, 92vw);
  margin: 0 auto;
  padding: 40px 0 8px;
}

.section5 .price-lead {
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 1.9;
  color: #33475b;
  text-align: center;
}

/* 初期費用（メインカード） */
.section5 .price-main {
  padding: 36px 32px;
  margin-bottom: 24px;
  background: #fff;
  border: 2px solid #f68e1b;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
  text-align: center;
}
.section5 .price-main__label {
  display: inline-block;
  padding: 5px 18px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #f68e1b;
  border-radius: 999px;
}
.section5 .price-main__title {
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #16324f;
}
.section5 .price-main__amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  color: #16324f;
}
.section5 .price-main__amount .num {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.section5 .price-main__amount .yen {
  font-size: 24px;
  font-weight: 700;
}
.section5 .price-main__amount .tax {
  margin-left: 6px;
  font-size: 14px;
  color: #5b6b7b;
}
.section5 .price-main__note {
  margin-top: 8px;
  font-size: 13px;
  color: #5b6b7b;
}

/* 見出し＋リスト（共通） */
.section5 .price-heading {
  margin: 24px 0 10px;
  padding-left: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #16324f;
  text-align: left;
  border-left: 4px solid #f68e1b;
}
.section5 .price-list {
  list-style: none;
  padding: 0;
  text-align: left;
}
.section5 .price-list li {
  position: relative;
  padding: 0 0 0 24px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.8;
  color: #33475b;
}
.section5 .price-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #f68e1b;
  font-weight: 700;
}

/* オプションブロック */
.section5 .price-block {
  padding: 32px 28px;
  margin-bottom: 24px;
  background: #fff;
  border: 1px solid #e1e8ef;
  border-radius: 14px;
}
.section5 .price-block__title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  color: #16324f;
  text-align: center;
}
.section5 .price-block__title .tag {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #f68e1b;
  letter-spacing: .08em;
}

/* 伴走支援の3プラン */
.section5 .plan-grid {
  display: flex;
  gap: 14px;
}
.section5 .plan {
  position: relative;
  flex: 1;
  padding: 22px 12px 18px;
  background: #f4f7fa;
  border: 2px solid #e1e8ef;
  border-radius: 10px;
  text-align: center;
}
.section5 .plan--rec {
  background: #fff7ee;
  border-color: #f68e1b;
}
.section5 .plan__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #5b6b7b;
  border-radius: 999px;
  white-space: nowrap;
}
.section5 .plan__badge--rec {
  background: #f68e1b;
}
.section5 .plan__term {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #5b6b7b;
}
.section5 .plan__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  color: #16324f;
}
.section5 .plan__price .num {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
}
.section5 .plan__price .yen {
  font-size: 16px;
  font-weight: 700;
}
.section5 .plan__unit {
  margin-top: 2px;
  font-size: 12px;
  color: #5b6b7b;
}

/* 研修オプション */
.section5 .training-grid {
  display: flex;
  gap: 14px;
}
.section5 .training {
  flex: 1;
  padding: 20px 16px;
  background: #f4f7fa;
  border-radius: 10px;
  text-align: center;
}
.section5 .training__name {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #33475b;
}
.section5 .training__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  color: #16324f;
}
.section5 .training__price .num {
  font-size: 26px;
  font-weight: 900;
}
.section5 .training__price .yen {
  font-size: 15px;
  font-weight: 700;
}
.section5 .training__price .tax {
  margin-left: 4px;
  font-size: 12px;
  color: #5b6b7b;
}
.section5 .price-hint {
  margin-top: 14px;
  font-size: 14px;
  color: #33475b;
  text-align: center;
}

.section5 .price-notes {
  margin-bottom: 28px;
  font-size: 12px;
  line-height: 1.9;
  color: #5b6b7b;
  text-align: left;
}

.section5 .price-cta {
  display: block;
  width: min(420px, 100%);
  margin: 0 auto;
  padding: 17px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #f68e1b;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #e4721f;
}
.section5 .price-cta:hover {
  background: #f47808;
}

@media (max-width: 768px) {
  .section5 .price-inner {
    width: min(880px, 90vw);
    padding: 28px 0 8px;
  }
  .section5 .price-lead {
    font-size: 15px;
    margin-bottom: 20px;
  }
  .section5 .price-main {
    padding: 26px 18px;
  }
  .section5 .price-main__title {
    font-size: 18px;
  }
  .section5 .price-main__amount .num {
    font-size: 40px;
  }
  .section5 .price-block {
    padding: 24px 18px;
  }
  .section5 .price-block__title {
    font-size: 17px;
  }
  .section5 .plan-grid,
  .section5 .training-grid {
    flex-direction: column;
    gap: 18px;
  }
  .section5 .price-list li {
    font-size: 14px;
  }
  .section5 .price-cta {
    font-size: 16px;
  }
}

/* ---- サービス内容セクション（旧料金レイアウトを流用・金額なし版） ---- */
.section5 .price-main__desc {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.9;
  color: #33475b;
}
.section5 .price-block__desc {
  margin: -8px 0 20px;
  font-size: 15px;
  line-height: 1.9;
  color: #33475b;
  text-align: center;
}

/* 期間プラン（金額がなくなったので期間を主役にする） */
.section5 .plan__term {
  margin-bottom: 4px;
  font-size: 26px;
  font-weight: 900;
  color: #16324f;
}
.section5 .plan__unit {
  margin-top: 0;
  font-size: 13px;
  font-weight: 700;
  color: #5b6b7b;
}

/* 研修メニュー */
.section5 .training {
  text-align: left;
}
.section5 .training__name {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #16324f;
  text-align: center;
}
.section5 .training__detail {
  font-size: 14px;
  line-height: 1.8;
  color: #5b6b7b;
  text-align: center;
}

@media (max-width: 768px) {
  .section5 .price-main__desc,
  .section5 .price-block__desc {
    font-size: 14px;
  }
  .section5 .price-block__desc {
    text-align: left;
  }
  .section5 .plan__term {
    font-size: 22px;
  }
}

/* ============ 導入の流れ（#flow / 事業概要資料P27の5ステップ） ============ */
.section-flow {
  padding: 0 0 72px;
  background: #fff;
}

/* セクション見出し：他セクションと同じ紺帯 */
.flow-inner {
  width: min(760px, 92vw);
  margin: 0 auto;
}

.flow-lead {
  margin: 32px 0 28px;
  font-size: 17px;
  line-height: 1.9;
  color: #33475b;
  text-align: center;
}
.flow-lead strong {
  color: #f68e1b;
  font-weight: 700;
}

.flow-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ステップをつなぐ縦線 */
.flow-list::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 33px;
  width: 2px;
  background: #dbe4ec;
}

.flow-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
.flow-step:last-child {
  margin-bottom: 0;
}

.flow-step__no {
  position: relative;
  z-index: 1;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0F314D;
  color: #fff;
  border-radius: 50%;
  font-family: "Noto Sans JP", Helvetica;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}
.flow-step__label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f68e1b;
}

.flow-step__body {
  flex: 1 1 auto;
  padding: 20px 24px;
  background: #f4f7fa;
  border-radius: 12px;
}
.flow-step__title {
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #16324f;
}
.flow-step__desc {
  font-size: 15px;
  line-height: 1.9;
  color: #5b6b7b;
}
.flow-step__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow-step__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.9;
  color: #5b6b7b;
}
.flow-step__list li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 4px;
  width: 8px;
  height: 8px;
  background: #f68e1b;
  border-radius: 50%;
}

.flow-notes {
  margin: 24px 0 28px;
  font-size: 13px;
  line-height: 1.9;
  color: #7a8a9a;
}

.flow-cta {
  display: block;
  width: min(420px, 100%);
  margin: 0 auto;
  padding: 18px 20px;
  background: #f68e1b;
  color: #fff;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(246, 142, 27, .3);
  transition: opacity .2s;
}
.flow-cta:hover {
  opacity: .85;
}

@media (max-width: 768px) {
  .section-flow {
    padding: 0 0 48px;
  }
.flow-lead {
    margin: 24px 0 22px;
    font-size: 15px;
  }
  .flow-list::before {
    top: 26px;
    bottom: 26px;
    left: 27px;
  }
  .flow-step {
    gap: 12px;
    margin-bottom: 16px;
  }
  .flow-step__no {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
  .flow-step__label {
    font-size: 9px;
  }
  .flow-step__body {
    padding: 16px 16px;
  }
  .flow-step__title {
    font-size: 16px;
  }
  .flow-step__desc,
  .flow-step__list li {
    font-size: 14px;
  }
  .flow-cta {
    font-size: 16px;
    padding: 16px 18px;
  }
}

/* ===================================================================
   新ロゴ（法人セットアップロゴ A_0801）差し替え
   旧ロゴは横長（約3.2:1）だったが、Aは縦長（約1.5:1）のため
   幅ではなく高さを基準にして、ヘッダー・フッターの見た目の高さを維持する
   =================================================================== */
.navbar .container .logo-link--brand {
  width: auto;
}
.navbar .container .logo-link--brand .imgArea {
  width: auto;
}
.navbar .container .logo-link--brand .imgArea img {
  display: block;
  width: auto;
  /* 本文（サービス内容の見出し）と同じ78pxに揃える。
     小さいと中の「法人セットアップ」の文字が10px程度まで縮んで粗く見えるため。 */
  height: 5.4vw;
  max-height: 78px;
}
@media screen and (max-width: 1250px) {
  .navbar .container .logo-link--brand .imgArea img {
    height: 5.4vw;
  }
}
@media screen and (max-width: 768px) {
  .navbar .container .logo-link--brand .imgArea img {
    height: 6.5vw;
    max-height: none;
  }
}
@media screen and (max-width: 450px) {
  .navbar .container .logo-link--brand .imgArea img {
    height: 11.5vw;
  }
}

/* フッター（左・右エリアとも同じロゴ） */
.m-footer .footer-area .bottom-area .left-area .imgArea {
  width: auto;
}
.m-footer .footer-area .bottom-area .left-area .imgArea img,
.m-footer .footer-area .bottom-area .right-area .imgArea img {
  display: block;
  width: auto;
  height: 7vw;
  max-height: 104px;
}
@media screen and (max-width: 1250px) {
  .m-footer .footer-area .bottom-area .left-area .imgArea img {
    height: 8vw;
  }
}
@media screen and (max-width: 768px) {
  .m-footer .footer-area .bottom-area .right-area .imgArea {
    width: auto;
  }
  .m-footer .footer-area .bottom-area .right-area .imgArea img {
    height: 20vw;
    max-height: none;
    margin: 0 auto;
  }
}

/* ===================================================================
   AIリスキリング研修（助成金対応）／選ばれる理由のベネフィット化
   =================================================================== */
.section5 .price-block--rec {
  background: #fff7ee;
  border: 2px solid #f68e1b;
  border-radius: 12px;
  padding: 24px 20px;
}
.section5 .price-block--rec .training {
  background: #fff;
}
.section5 .subsidy {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: #d1690a;
}
.section5 .training--rec {
  position: relative;
  border: 2px solid #f68e1b;
}
.section5 .training__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #f68e1b;
  border-radius: 999px;
  white-space: nowrap;
}
.section5 .price-caution {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.9;
  color: #5b6b7b;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .section5 .price-block--rec {
    padding: 20px 14px;
  }
}

/* 選ばれる理由：③カードの認定表記をラベル化 */
/* 両社のパートナー資格は、3枚のカードの下に1行でまとめる。
   カード内に入れると3枚目だけ縦に詰まって、バランスが崩れるため。 */
.reason .partner-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 22px;
}
.reason .partner-badges__item {
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #eaf1f8;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .reason .partner-badges {
    gap: 8px;
    margin-top: 18px;
  }
  .reason .partner-badges__item {
    padding: 6px 14px;
    font-size: 11.5px;
  }
}

/* ===================================================================
   サービス内容：商品名見出しをロゴC に差し替え
   =================================================================== */
.section5 .price-main__title--logo {
  margin: 0 auto 16px;
}
.section5 .price-main__title--logo img {
  display: block;
  width: min(340px, 78%);
  height: auto;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .section5 .price-main__title--logo img {
    width: min(260px, 88%);
  }
}

/* ===================================================================
   パートナープログラム（Claude Partner Network / OpenAI Select Partner）
   表記ルール：「OpenAI Select Partner」は完全一致で固定。
   「公式パートナー」「認定パートナー」等の独自表現は使わない。
   =================================================================== */
.partners {
  padding: 72px 0;
  background: #fff;
}
.partners__inner {
  width: min(1040px, 88%);
  margin: 0 auto;
  text-align: center;
}
.partners__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #f68e1b;
  margin-bottom: 12px;
}
.partners__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  color: #16324f;
}
.partners__lead {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.9;
  color: #5b6b7b;
}
.partners__grid {
  display: flex;
  gap: 24px;
  margin-top: 36px;
  text-align: left;
}
.partner-card {
  flex: 1;
  padding: 28px 30px;
  background: #f8fafc;
  border: 1px solid #e1e8ef;
  border-radius: 14px;
}
.partner-card__vendor {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #9aa8b6;
}
.partner-card__name {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #16324f;
}
.partner-card__status {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 18px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #16324f;
  border-radius: 999px;
}
.partner-card__desc {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.9;
  color: #5b6b7b;
}
.partners__note {
  margin-top: 24px;
  font-size: 12px;
  line-height: 1.9;
  color: #9aa8b6;
}
.partners__note a {
  color: #5b6b7b;
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .partners {
    padding: 48px 0;
  }
  .partners__title {
    font-size: 20px;
  }
  .partners__lead {
    font-size: 14px;
  }
  .partners__grid {
    display: block;
  }
  .partner-card {
    padding: 22px 20px;
  }
  .partner-card + .partner-card {
    margin-top: 16px;
  }
}


/* ===================================================================
   研修カード：キャッチ・内容・時間数の3段組み
   =================================================================== */
.section5 .training__sub {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: #e2670f;
}
.section5 .training__spec {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #6b6b6b;
  letter-spacing: .01em;
}
@media screen and (max-width: 767px) {
  .section5 .training__sub { font-size: 12px; }
  .section5 .training__spec { font-size: 11.5px; margin-top: 8px; padding-top: 7px; }
}


/* 研修カードは、枠の中で中央揃えに統一する */
.section5 .training,
.section5 .training__name,
.section5 .training__sub,
.section5 .training__detail,
.section5 .training__spec {
  text-align: center;
}


/* ===================================================================
   スマホのヒーロー：説明文を出さない
   1画面に入る情報が多くなりすぎるため（2026/9/8 社長指示）
   =================================================================== */
@media screen and (max-width: 768px) {
  .m-header .fv .text-area .top-text .text {
    display: none;
  }
}

/* ===================================================================
   サービス内容：メリハリをつける（2026/9/8）
   いちばん伝えたい数字を大きく出し、箇条書きは絞る。
   =================================================================== */
.section5 .figure {
  margin: 22px auto 0;
  padding: 20px 24px;
  max-width: 520px;
  text-align: center;
  background: #fff;
  border: 2px solid #f0e2d6;
  border-radius: 14px;
}
.section5 .figure__label {
  font-size: 13px;
  font-weight: 700;
  color: #7a6c62;
  letter-spacing: .02em;
}
.section5 .figure__num {
  margin-top: 2px;
  font-size: 58px;
  font-weight: 900;
  line-height: 1.15;
  color: #e2670f;
  letter-spacing: -.01em;
}
.section5 .figure__unit {
  margin-left: 4px;
  font-size: 26px;
  font-weight: 900;
  color: #23201e;
}
.section5 .figure__note {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  color: #55504b;
}
.section5 .figure--accent {
  background: #fff6ef;
  border-color: #e2670f;
}
.section5 .figure-row {
  display: flex;
  gap: 16px;
  margin-top: 22px;
}
.section5 .figure-row .figure--half {
  flex: 1;
  max-width: none;
  margin: 0;
}

/* 4日間のカリキュラム */
.section5 .curriculum {
  margin-top: 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section5 .curriculum li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #23201e;
  background: #fff;
  border-radius: 9px;
}
.section5 .curriculum__day {
  flex: none;
  min-width: 62px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  color: #fff;
  background: #23201e;
  border-radius: 5px;
  letter-spacing: .04em;
}

/* 修了時に目指すスキル */
.section5 .skills {
  margin-top: 12px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.section5 .skills li {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #23201e;
  background: #fff;
  border: 1px solid #f0d9c6;
  border-radius: 999px;
}

/* 登録企業としての一文は、控えめに下へ */
.section5 .price-main__by {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.85;
  color: #6b6b6b;
}

@media screen and (max-width: 767px) {
  .section5 .figure { padding: 16px 18px; }
  .section5 .figure__num { font-size: 44px; }
  .section5 .figure__unit { font-size: 20px; }
  .section5 .figure-row { flex-direction: column; gap: 12px; }
  .section5 .curriculum li { font-size: 13.5px; gap: 10px; padding: 10px 12px; }
  .section5 .curriculum__day { min-width: 54px; font-size: 11px; }
  .section5 .skills li { font-size: 12.5px; padding: 7px 13px; }
}

/* ===================================================================
   メインサービスを主役にする（2026/9/8）
   これまでは研修ブロックだけ色地で、メインサービスより目立っていた。
   主役＝法人セットアップ、脇＝研修・伴走、という順に見えるよう整理する。
   =================================================================== */

/* ① セクション見出しは一段控えめに。主役はこの下のカード */
/* ② メインサービスのカードを持ち上げる */
.section5 .price-main {
  padding: 46px 48px 42px;
  background: #fff;
  border: 3px solid #e2670f;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(226, 103, 15, .14);
}
.section5 .price-main__label {
  padding: 9px 26px;
  font-size: 15px;
  letter-spacing: .04em;
}
.section5 .price-main__title--logo img { width: min(430px, 88%); }
.section5 .price-main__desc { font-size: 17px; }

/* ③ 研修ブロックは色地をやめ、脇役の見え方にそろえる */
.section5 .price-block--rec {
  background: #fff;
  border-color: #e6ddd4;
}
.section5 .price-block--rec .figure { border-color: #ece1d6; }
.section5 .price-block--rec .curriculum li,
.section5 .price-block--rec .skills li { background: #faf8f6; }

@media screen and (max-width: 767px) {
.section5 .price-main { padding: 30px 20px 28px; border-width: 2.5px; border-radius: 14px; }
  .section5 .price-main__label { padding: 7px 20px; font-size: 13px; }
  .section5 .price-main__title--logo img { width: min(300px, 92%); }
  .section5 .price-main__desc { font-size: 14.5px; }
}

/* ===================================================================
   セクション見出し（.h2）  2026/9/8 に作り直し
   以前はセクションごとに同じ指定を書き分けていて73ルールあった。
   紺のベタ塗りが強すぎて、中身より見出しの器のほうが目立っていたため、
   「小さい英字ラベル ＋ 大きい日本語」の1コンポーネントに統一した。
   =================================================================== */
.h2 {
  position: relative;
  text-align: center;
}
.h2 .h2__en {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  color: #e2670f;
  text-transform: uppercase;
}
.h2 .text-wrapper {
  display: block;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .01em;
  color: #16324f;
  text-align: center;
}
/* 見出しの中の <span class="pc"> は、グローバルの display:block を打ち消す */
.h2 .text-wrapper .pc {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
@media screen and (max-width: 767px) {
  .h2 .h2__en { font-size: 12px; margin-bottom: 4px; }
  .h2 .text-wrapper { font-size: 23px; line-height: 1.55; }
}

/* サービス内容の中に置く図版 */
.section5 .service-fig {
  margin: 26px 0 0;
  padding: 20px 22px;
  background: #faf8f6;
  border-radius: 12px;
  text-align: center;
}
.section5 .service-fig img {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.section5 .service-fig figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: #6b6b6b;
}
@media screen and (max-width: 767px) {
  .section5 .service-fig { padding: 14px 12px; margin-top: 20px; }
  .section5 .service-fig figcaption { font-size: 12px; margin-top: 9px; }
}
.section5 .service-fig__note {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.75;
  color: #8a8079;
}
@media screen and (max-width: 767px) {
  .section5 .service-fig__note { font-size: 11.5px; }
}
.section5 .service-fig__title {
  margin-bottom: 14px;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 900;
  color: #16324f;
  letter-spacing: .02em;
  border-bottom: 1px solid #ece4dc;
}
@media screen and (max-width: 767px) {
  .section5 .service-fig__title { font-size: 14px; margin-bottom: 11px; padding-bottom: 8px; }
}

/* ===================================================================
   サービス内容の主従を作り直す（2026/9/10）
   セットアップが本体で、研修と伴走支援はそこに乗るオプション。
   3つを同じ枠で並べると並列に見えるため、セットアップは枠を外して
   ページに直接置き、オプション2つだけを枠で囲って横に並べる。
   =================================================================== */

/* ── 本体：枠をなくし、ロゴと写真で見せる ── */
.section5 .price-main {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}
.section5 .price-main__title--logo img { width: min(520px, 92%); }
.section5 .price-main__desc { font-size: 18px; margin-top: 18px; }

.section5 .price-main__photo {
  margin: 26px auto 0;
  max-width: 900px;
  border-radius: 16px;
  overflow: hidden;
}
.section5 .price-main__photo img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
}

/* 本体の中身は、写真より下を左寄せに戻す */
.section5 .price-main .figure,
.section5 .price-main .price-heading,
.section5 .price-main .price-list,
.section5 .price-main .service-fig,
.section5 .price-main .price-main__by { text-align: left; }
.section5 .price-main .figure { text-align: center; }

/* ── オプション：2つを横に並べ、本体より一段小さく ── */
.section5 .option-lead {
  margin: 56px 0 18px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  color: #55504b;
}
.section5 .option-grid {
  display: flex;
  gap: 24px;
  align-items: stretch;   /* 2枚の高さを揃える */
}
.section5 .option-grid > .price-block {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.section5 .price-block__photo {
  margin: 14px 0 18px;
  border-radius: 12px;
  overflow: hidden;
}
.section5 .price-block__photo img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}
/* 横並びになったぶん、中の余白を詰める */
.section5 .option-grid .figure-row { flex-direction: column; gap: 12px; }
.section5 .option-grid .figure__num { font-size: 44px; }
.section5 .option-grid .figure__unit { font-size: 20px; }

@media screen and (max-width: 900px) {
  .section5 .option-grid { flex-direction: column; gap: 20px; }
  .section5 .option-grid .figure-row { flex-direction: row; }
}
@media screen and (max-width: 767px) {
  .section5 .price-main__title--logo img { width: min(320px, 94%); }
  .section5 .price-main__desc { font-size: 15px; margin-top: 14px; }
  .section5 .price-main__photo { margin-top: 18px; border-radius: 12px; }
  .section5 .price-main__photo img { height: 190px; }
  .section5 .option-lead { margin: 38px 0 14px; font-size: 14.5px; }
  .section5 .price-block__photo img { height: 150px; }
  .section5 .option-grid .figure-row { flex-direction: column; }
}
/* オプションカードは、中身の量が違っても外枠の高さを揃える */
.section5 .option-grid > .price-block {
  display: flex;
  flex-direction: column;
}
/* 余りの置き場所は「下」に固定する。
   以前は最後の注記に margin-top:auto を付けていたが、これは
   「短いほうのカードの最後の要素だけを下辺に貼り付ける」動きになる。
   どちらが短いかは画面幅と中身で入れ替わるため、直すたびに
   空きの出る場所が変わっていた。auto をやめると、上から自然に流れ、
   余りは必ず下に出る。写真も見出しも常に左右で同じ高さに並ぶ。 */
/* 箇条書きに添える一行説明 */
.section5 .price-list__sub {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.7;
  color: #8a8079;
}
@media screen and (max-width: 767px) {
  .section5 .price-list__sub { font-size: 11.5px; }
}

/* ===================================================================
   flow / contact の上の余白（2026/9/10）
   他のセクション（section5・section9）は padding が 5.56vw 0 で上下に
   余白があるが、この2つだけ上が 0 で、前のセクションと詰まっていた。
   同じ値に揃える。
   =================================================================== */
.section-flow,
.section-contact { padding-top: 5.5555555556vw; }

@media screen and (min-width: 1800px) {
  .section-flow,
  .section-contact { padding-top: 4.4444444444vw; }
}
@media screen and (min-width: 2200px) {
  .section-flow,
  .section-contact { padding-top: 132px; }
}
@media screen and (max-width: 1250px) {
  .section-flow,
  .section-contact { padding-top: 6.4vw; }
}
@media screen and (max-width: 768px) {
  .section-flow,
  .section-contact { padding-top: 7.8125vw; }
}
@media screen and (max-width: 450px) {
  .section-flow,
  .section-contact { padding-top: 13.3333333333vw; }
}

/* ===================================================================
   サービス内容を、他のセクションと同じ幅・同じ存在感にする（2026/9/10）

   計測したら、内側の幅がここだけ極端に狭かった。
     ロゴ帯 1440 ／ こんなお悩み 1200 ／ メリット 1100 ／ サービス内容 880
   さらに、サービス内容と導入の流れが両方とも白背景で境目が消えていた。
   幅を広げ、背景に色を敷いて、次のセクションとの境を作る。
   =================================================================== */
.front .section5 {
  background: #f7f4f1;   /* 白い「導入の流れ」との境をつくる */
}
.section5 .price-inner {
  width: min(1120px, 92vw);
  padding-top: 34px;
}

/* 幅が広がったぶん、主役をさらに大きく */
.section5 .price-main__title--logo img { width: min(580px, 90%); }
.section5 .price-main__photo { max-width: 1120px; }
.section5 .price-main__photo img { height: 400px; }
.section5 .price-main__desc { font-size: 19px; }

/* 本体の中身は白い面に載せて、背景から浮かせる */
.section5 .price-main__inner {
  margin-top: 26px;
  padding: 34px 40px 30px;
  background: #fff;
  border-radius: 16px;
}

/* 導入の流れは白のまま、境界をはっきりさせる */
.section-flow { background: #fff; }

@media screen and (max-width: 1250px) {
  .section5 .price-inner { width: min(1120px, 90vw); }
}
@media screen and (max-width: 767px) {
  .section5 .price-main__title--logo img { width: min(330px, 94%); }
  .section5 .price-main__photo img { height: 200px; }
  .section5 .price-main__desc { font-size: 15px; }
  .section5 .price-main__inner { margin-top: 18px; padding: 22px 18px 20px; border-radius: 12px; }
}
/* 幅が広がったので、中の要素も釣り合う大きさにする */
.section5 .price-main__inner .figure {
  max-width: 100%;
  padding: 26px 24px;
}
.section5 .price-main__inner .figure__num { font-size: 68px; }
.section5 .price-main__inner .figure__unit { font-size: 30px; }
.section5 .price-main__inner .figure__label { font-size: 14px; }
.section5 .price-main__inner .figure__note { font-size: 14.5px; }
.section5 .price-main .price-heading { margin-top: 26px; font-size: 17px; }
.section5 .price-main .price-list > li { font-size: 16px; }
/* 白い面の中に薄グレーの面を重ねない（面が3重になるため） */
.section5 .price-main__inner .service-fig {
  background: none;
  padding: 0;
  border-top: 1px solid #efe9e3;
  padding-top: 24px;
  margin-top: 28px;
  /* 面をやめて罫線1本にしたので、角丸を残すと線の両端がフックのように
     反り返ってしまう。0に戻す。 */
  border-radius: 0;
}
@media screen and (max-width: 767px) {
  .section5 .price-main__inner .figure { padding: 16px 14px; }
  .section5 .price-main__inner .figure__num { font-size: 46px; }
  .section5 .price-main__inner .figure__unit { font-size: 21px; }
  .section5 .price-main__inner .figure__note { font-size: 12.5px; }
  .section5 .price-main .price-list > li { font-size: 14px; }
}

/* ===================================================================
   オプション2枚を整える（2026/9/10）
   ① 高さを揃える  ② 見出しを大きく  ③ 幅を目一杯に
   クロアカLPを見ると、見出し30px・本文18px・カードは横幅いっぱいだった。
   ここは20px/14pxで、他セクションに比べて小さかった。
   =================================================================== */

/* ③ 幅：セクションの内側いっぱいまで使う */
.section5 .option-grid {
  width: 100%;
  gap: 28px;
}
.section5 .option-grid > .price-block { padding: 34px 32px; }

/* ② 見出し：クロアカの30pxに寄せる（本文とのジャンプ率をつくる） */
.section5 .price-block__title {
  margin-bottom: 22px;
  font-size: 28px;
  line-height: 1.45;
  font-weight: 900;
}
.section5 .price-block__title .tag {
  margin-bottom: 10px;
  font-size: 13px;
  letter-spacing: .1em;
}
/* 本文もクロアカに合わせて一段上げる */
.section5 .price-block__desc { font-size: 16.5px; line-height: 1.9; }

/* ① 高さを揃える。中身は上から詰め、余った分は下に集める。
   （行数を固定すると、要素数の違う右カードの途中に穴が空く） */
.section5 .option-grid > .price-block {
  display: flex;
  flex-direction: column;
}
.section5 .option-grid > .price-block > *:last-child { margin-bottom: 0; }
.section5 .option-grid > .price-block > .price-caution { margin-top: 20px; }

@media screen and (max-width: 900px) {
  .section5 .option-grid > .price-block { display: block; }
}
@media screen and (max-width: 767px) {
  .section5 .price-block__title { font-size: 21px; margin-bottom: 16px; }
  .section5 .price-block__title .tag { font-size: 11.5px; }
  .section5 .price-block__desc { font-size: 14.5px; }
  .section5 .option-grid > .price-block { padding: 24px 18px; }
}

/* ===================================================================
   サービス内容の幅（2026/9/10）
   他セクションは画面幅に応じて伸びる（1440px:1100 / 1920px:1173）のに、
   ここだけ 1120px 固定で、大画面ほど狭く見えていた。
   主役のセクションなので、他より一回り広い値にする。
   =================================================================== */
.section5 .price-inner { width: 86vw; max-width: 1700px; }
.section5 .price-main__photo { max-width: 100%; }

@media screen and (min-width: 1800px) {
  .section5 .price-inner { width: 74vw; }
}
@media screen and (min-width: 2200px) {
  .section5 .price-inner { width: 1700px; }
}
@media screen and (max-width: 1250px) {
  .section5 .price-inner { width: 90vw; }
}
@media screen and (max-width: 767px) {
  .section5 .price-inner { width: 92vw; }
}

/* ===================================================================
   数字の出典（2026/9/10）
   クロアカLPは数字に必ず出典を添えていた。数字だけ置くより信頼される。
   =================================================================== */
.section5 .figure__src {
  display: inline-block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.7;
  color: #9a908a;
  letter-spacing: .01em;
}
.m-header .fv .text-area .recomend-note {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .02em;
}
@media screen and (max-width: 767px) {
  .section5 .figure__src { font-size: 10.5px; }
  .m-header .fv .text-area .recomend-note { font-size: 10.5px; margin-top: 7px; text-align: center; }
}
/* セクション番号（クロアカの「04B / FDE MARKET VALUE」に倣う） */
.h2 .h2__num {
  margin-right: 10px;
  padding-right: 12px;
  border-right: 1px solid rgba(226, 103, 15, .38);
  font-weight: 900;
  letter-spacing: .06em;
}
@media screen and (max-width: 767px) {
  .h2 .h2__num { margin-right: 7px; padding-right: 8px; }
}
/* 見出しの2行目（クロアカは2行目に色を置いて強弱をつけていた） */
.h2 .h2__accent {
  display: inline-block;
  margin-top: 4px;
  font-size: .72em;
  font-weight: 900;
  color: #e2670f;
  letter-spacing: .01em;
}

/* ===================================================================
   サービス内容の細部（2026/9/11）
   幅を広げたあとに出た4つのズレを直す。
   =================================================================== */

/* ① 数字の枠が1341pxまで広がり、中身に対して左右が空きすぎていた */
.section5 .price-main__inner > .figure {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ② 組織図：見出しの罫線は1341pxなのに画像だけ760pxで、枠が途切れて見えた */
.section5 .price-main__inner .service-fig img {
  max-width: 100%;
}

/* ③ オプションの写真：元画像は16:9なのに高さ170pxで切っていた（3.7:1）
      アスペクト比で指定して、切れないようにする */
.section5 .price-block__photo img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ④ 左右の数字カード：出典の行数が違うと高さがずれるので揃える */
.section5 .figure-row { align-items: stretch; }
.section5 .figure-row > .figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .section5 .price-main__inner > .figure { max-width: 100%; }
}

/* ⑤ セットアップの内容：1行が400px弱しかなく、右半分がまるごと空いていた。
      広い画面では2列に分けて、幅を使い切る。 */
.section5 .price-main__inner .price-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 0;
}
@media screen and (max-width: 900px) {
  .section5 .price-main__inner .price-list { grid-template-columns: 1fr; }
}

/* ===================================================================
   スマホの指摘（2026/9/11）
   =================================================================== */

/* ⑤上 セクション間の余白を margin で取っていたため、そこだけ body の
      白が見えていた。padding に移して、クリーム色の面を余白まで伸ばす。 */
@media (max-width: 768px) {
  .front .section5 {
    margin-top: 0;
    padding-top: 13.0208333333vw;
  }
}
@media (max-width: 450px) {
  .front .section5 {
    margin-top: 0;
    padding-top: 22.2222222222vw;
  }
}

/* ===================================================================
   文字の大きさをクロアカLPに合わせる（2026/9/12）

   元のCSSは vw 指定で、スマホでは PC の約0.87倍まで一律に縮んでいた。
   クロアカは px 指定で下限を持たせて止めている。
   ここでは clamp() を使い、PCの見え方は保ったまま
   「スマホでこれ以上小さくしない」下限を与える。
   =================================================================== */

/* ① セクション見出し ―― クロアカ PC44〜64 / SP24〜33 に合わせる */
.front .h2 .text-wrapper      { font-size: clamp(29px, 3.05vw, 48px); }
.front .h2 .h2__accent        { font-size: clamp(19px, 2.08vw, 32px); }
.front .section3 .container .section-title { font-size: clamp(29px, 3.47vw, 54px); }
.front .partners__title       { font-size: clamp(24px, 2.22vw, 34px); }

/* ② 本文の下限 ―― クロアカの本文は SP 16px で止まる */
.m-header .fv .text-area .top-text .text { font-size: clamp(15px, 1.11vw, 18px); }
.front .cta .text-area .text2           { font-size: clamp(15px, 1.11vw, 18px); }
.front .section7 .content .text         { font-size: clamp(15px, 1.11vw, 18px); }
.front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-3 { font-size: clamp(15px, 1.11vw, 18px); }
.front .section1 .article .main-area .bottom-area .text1 { font-size: clamp(15px, 1.25vw, 20px); }
.front .section1 .article .main-area .bottom-area .text3 { font-size: clamp(12.5px, 0.97vw, 15px); }
.section5 .price-lead,
.section-flow .flow-lead                { font-size: clamp(16px, 1.18vw, 19px); }
.section5 .price-main__desc             { font-size: clamp(16px, 1.32vw, 20px); }
.section5 .price-main .price-list > li  { font-size: clamp(15px, 1.11vw, 17px); }
.section5 .price-block__desc            { font-size: clamp(15px, 1.15vw, 17px); }
.section-flow .flow-step__desc          { font-size: clamp(15px, 1.04vw, 16px); }

/* ③ カード見出し ―― 本文と同じ大きさになっていたものを上げる */
.front .section3 .container .article-area .article .main-text { font-size: clamp(19px, 1.81vw, 28px); }
.front .section2 .content-wrapper .wrapper .bottom-area .text-wrapper-2 { font-size: clamp(20px, 1.81vw, 28px); }
.front .section-flow .flow-step__title  { font-size: clamp(17px, 1.32vw, 20px); }

/* ④ 注釈と出典 ―― 数を減らしたうえで、読める大きさまで上げる */
.front .price-caution,
.front .price-notes,
.front .flow-notes,
.front .partners__note,
.front .service-fig__note,
.m-header .fv .text-area .recomend-note,
.front .case-modal__note {
  font-size: clamp(13px, 0.94vw, 13.5px);
  line-height: 1.85;
}
.front .figure__src       { font-size: clamp(12px, 0.87vw, 12.5px); }
.front .price-list__sub   { font-size: clamp(12.5px, 0.9vw, 13px); }

/* ===================================================================
   「小さくて薄い」文字の一掃（2026/9/12）

   コントラスト比を実測したところ、白背景の上のオレンジ文字が 2.3〜3.4、
   グレーの注記が 3.5〜3.9 だった。読みやすさの基準は 4.5 なので、
   どれも下回っている。小さい文字ほど薄く見えるので、
   「12px未満をなくす」と「小さい文字は色を濃くする」を同時にやる。
   大きな見出しのオレンジは、面積があるので現状のまま。
   =================================================================== */

/* ① 小さい文字の下限を 13px にする（バッジ類だけ 12px） */
.front .client-logos__label,
.front .figure__label,
.front .figure__note,
.front .plan__unit,
.front .price-main .price-list > li,
.front .curriculum li,
.front .skills li,
.front figcaption,
.front .contact-note,
.front .contact-mail,
.front .partner-card__vendor,
.front .partners__label,
.front .option-lead          { font-size: clamp(13.5px, 0.97vw, 14.5px); }

.front .flow-step__label,
.front .curriculum__day,
.front .plan__badge,
.front .required             { font-size: clamp(12px, 0.83vw, 12.5px); }
.section5 .price-block__title .tag { font-size: clamp(12px, 0.83vw, 12.5px); }

.front .h2__en,
.front .h2__num              { font-size: clamp(13px, 0.9vw, 14px); }

.m-footer .bottomArea a,
.m-footer .copy              { font-size: clamp(13px, 0.9vw, 14px); }

/* ② 小さい文字の色を濃くする ―― オレンジは色味を保ったまま暗く */
/* バッジ類（.tag / .required / .plan__badge）は、それ自体が色の面を
   持っていて文字は白抜き。色を変えると面と同化するので触らない。 */
.front .h2__en,
.front .h2__num,
.front .partners__label,
.front .partner-card__vendor { color: #c2570a; }

.front .price-list__sub,
.front .service-fig__note,
.front .flow-notes,
.front .price-caution,
.front .contact-note,
.front .figcaption,
.front figcaption            { color: #5f5a55; }

/* ③ 取りこぼしていた3箇所 */
.front .section2 .content-wrapper .wrapper .top-area .text-wrapper { font-size: clamp(13.5px, 0.97vw, 14.5px); }
.reason .partner-badges__item { font-size: clamp(12.5px, 0.87vw, 13px); }
.m-footer .footer-area .bottom-area .left-area .bottomArea a,
.m-footer .footer-area .bottom-area .right-area .bottomArea a { font-size: clamp(13px, 0.9vw, 14px); }
.section5 .service-fig figcaption          { font-size: clamp(13.5px, 0.97vw, 14.5px); }
.section5 .price-main__inner .figure__note { font-size: clamp(13.5px, 1.01vw, 14.5px); }
.pagetop span, .m-footer .pagetop span     { font-size: 12px; }

/* 導入事例の注記（2026/9/21）
   数字の出どころと、写真が本人ではないことを明記する。 */
.front .case-study-swiper .case-note {
  margin: 18px auto 0;
  padding: 0 5vw;
  text-align: center;
  font-size: clamp(13px, 0.94vw, 13.5px);
  line-height: 1.8;
  color: #5f5a55;
}

/* ===================================================================
   2026/9/21 の指摘
   =================================================================== */

/* ① パートナーカードの見出しをロゴに */
.front .partner-card__logo {
  margin: 0 0 14px;
}
.front .partner-card__logo img {
  display: block;
  width: auto;
  height: clamp(38px, 3vw, 46px);
}

/* ② 助成金カードとCTAボタンの間に余白がなかった */
.section5 .price-cta {
  margin-top: clamp(28px, 2.8vw, 44px);
}

/* ③⑤ リセットCSSが strong を 1.6rem に固定していたため、
      「2〜4週間」「無料」「3営業日以内」だけ本文より小さくなっていた。
      親の大きさを継ぐようにする。 */
.front strong { font-size: inherit; }

/* 問い合わせのリード文も本文の下限に合わせる */
.front .contact-lead { font-size: clamp(16px, 1.18vw, 19px); }

/* ===================================================================
   メイン写真のローテーション（2026/9/21）
   3枚を重ねて、CSSだけで入れ替える。JSもSwiperも使わない。
   1枚4.5秒 → 1秒かけて次へ。3枚で15秒ひとまわり。
   img を3枚入れて .price-main__photo に --rotate を足すと動く。
   =================================================================== */
.section5 .price-main__photo--rotate {
  position: relative;
  height: 400px;               /* これまで img に付けていた高さを容器へ移す */
}
.section5 .price-main__photo--rotate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: setupPhotoFade 15s linear infinite;
}
.section5 .price-main__photo--rotate img:nth-child(1) { animation-delay: 0s; }
.section5 .price-main__photo--rotate img:nth-child(2) { animation-delay: 5s; }
.section5 .price-main__photo--rotate img:nth-child(3) { animation-delay: 10s; }

@keyframes setupPhotoFade {
  0%     { opacity: 1; }
  30%    { opacity: 1; }   /* 4.5秒 表示 */
  36.67% { opacity: 0; }   /* 1秒かけて消える */
  93.33% { opacity: 0; }
  100%   { opacity: 1; }   /* 前の1枚が消えるのと入れ違いに現れる */
}

@media screen and (max-width: 767px) {
  .section5 .price-main__photo--rotate { height: 190px; }
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
  .section5 .price-main__photo--rotate { height: 200px; }
}

/* 動きを減らす設定の人には、1枚目だけ見せる */
@media (prefers-reduced-motion: reduce) {
  .section5 .price-main__photo--rotate img { animation: none; }
  .section5 .price-main__photo--rotate img:nth-child(1) { opacity: 1; }
  .section5 .price-main__photo--rotate img:nth-child(n+2) { opacity: 0; }
}

/* ===================================================================
   パートナーの表示（2026/9/23）

   一度1枚にまとめたが、2枚（1社ずつ枠）に戻した。
   まとめるとロゴを横に並べることになり、2社で大きさが揃わないぶん
   バランスの悪さが目立つ。枠で分けると、その差が気にならない。

   ロゴは配布物を無加工で使う（改変しない）。代わりに下地を白にする。
   OpenAIの素材は中が透過で枠付き、Claudeは白背景で枠なし。形が違うのは
   配布物がそうだからで、こちらで揃えない。
   枠のぶん中身が小さくなるOpenAIだけ背を高くして、字の大きさを近づける。
   =================================================================== */
.partner-card {
  background: #fff;
}
.front .partner-card__logo {
  display: flex;
  align-items: center;
  margin: 0 0 14px;
  min-height: clamp(56px, 4.4vw, 68px);
}
.front .partner-card__logo img {
  display: block;
  width: auto;
}
.front .partner-card__logo--claude img { height: clamp(40px, 3.1vw, 48px); }
.front .partner-card__logo--openai img { height: clamp(56px, 4.4vw, 68px); }


/* ===================================================================
   2026/9/22 の指摘
   =================================================================== */

/* ⑤「Claude Code/Codexで」だけ画像で、下の見出しに対して小さすぎた。
      画像なので文字サイズではなく幅で合わせる。 */
.front .cta .main-text .imgArea { width: 26vw; }
@media screen and (max-width: 1250px) {
  .front .cta .main-text .imgArea { width: 30vw; }
}
@media screen and (max-width: 767px) {
  .front .cta .main-text .imgArea { width: 66vw; }
}

/* ① スマホの1画面目に、ロゴ・見出し・人物・バッジまでを入れる。
      いまは下の余白と行間で 600px を超えていて、読み込み直後は
      バッジが画面の外に出ていた。 */
@media screen and (max-width: 767px) {
  .m-header .fv {
    padding: 20vw 0 10vw;
  }
  .m-header .fv .text-area {
    gap: 3.2vw;
  }
  .m-header .fv .text-area .top-text .main-title .span {
    line-height: 126%;
  }
}

/* 2026/9/22 追記：数字の丸が月桂樹に被っていた
   丸は position:relative + top で持ち上げているだけなので、
   ここを変えても下のCTAの位置は動かない（流れ上の位置は変わらない）。
   持ち上げ量 -8.9vw → -5vw。月桂樹の下端から10pxほど離れる。 */
@media screen and (max-width: 767px) {
  .m-header .fv .text-area .recomend-area { top: -4vw; }
  .m-header .fv .text-area .link-button   { top: -3vw; }
}

/* お悩み→解決の矢印（2026/9/22）
   画像（img40）をやめてCSSで描く。元は686×138＝5:1で、
   ① 黄色と白のコントラストが1.2:1しかなく上半分が見えていない
   ② 5:1だと山の角度が11度しかなく、下向きに見えない
   ③ 4層の間の白線が表示サイズで潰れて1枚の塊になる
   という3点で「大きいのに読めない」状態だった。
   黄色をやめ、幅を1/4にして角度を立て、濃さの差で段をつける。 */
.front .section2 .content-wrapper .wrapper .arrow--chevron {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.35vw, 6px);
}
.front .section2 .content-wrapper .wrapper .arrow--chevron span {
  display: block;
  width: clamp(62px, 6.1vw, 92px);
  background: #E4721F;
  -webkit-clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 42%, 50% 100%, 0 42%);
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 42%, 50% 100%, 0 42%);
}
.front .section2 .content-wrapper .wrapper .arrow--chevron span:nth-child(1) { height: clamp(10px, 0.97vw, 14px); opacity: .28; }
.front .section2 .content-wrapper .wrapper .arrow--chevron span:nth-child(2) { height: clamp(10px, 0.97vw, 14px); opacity: .55; }
.front .section2 .content-wrapper .wrapper .arrow--chevron span:nth-child(3) { height: clamp(17px, 1.67vw, 24px); opacity: 1; }
@media screen and (max-width: 767px) {
  .front .section2 .content-wrapper .wrapper .arrow--chevron {
    height: auto;
    padding: 5.5vw 0;
  }
}

/* お悩みの写真の角丸（2026/9/22）
   img39 は角丸が画像に焼き込んである（590幅に対して半径52px＝8.8%）。
   作り直した img42・img44 は角丸なしなので、CSSで同じ丸みに揃える。
   写真の縦横比は固定なので、横8.8% / 縦14.5% と書くと
   どの表示サイズでも正円の角になり、img39 の焼き込みとぴたり重なる。 */
.front .section2 .content-wrapper .wrapper .top-area .imgArea img {
  border-radius: 8.8% / 14.5%;
}

/* 追従CTAはスクロールしてから出す（2026/9/22）
   スマホのファーストビューで、ヒーロー自身のCTAと数字の丸に重なっていた。
   ヒーローのCTAを通り過ぎたところで初めて出す（判定はmain.js）。
   visibility も切り替えて、隠れている間は押せないようにする。

   注意：transform は使わないこと。スマホ幅では既に
   transform: translateX(-50%) で左右中央に置いてあり、ここで
   transform を書くとそれを打ち消して右半分がはみ出す（一度やった）。
   上下の動きは transform と別枠の translate プロパティで足す。 */
.floating {
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity .3s ease, translate .3s ease, visibility .3s;
}
.floating.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .floating { transition: none; translate: 0 0; }
}


/* ===================================================================
   2026/9/23 の指摘
   =================================================================== */

/* A2 選ばれる理由の副題
   ・スマホで小さすぎた（4vw＝15.6px）
   ・中央揃えの行末に読点があると、その分だけ左に寄って見える。
     SPは改行が入るので読点は不要。HTML側で .pc-inline に入れて出し分ける */
.front .reason .title-area .span-wrapper1 .text,
.front .reason .title-area .span-wrapper1 .text .bold {
  font-size: clamp(17px, 1.45vw, 26px);
  line-height: 1.75;
}

/* A7 スマホの月桂樹が横に間延びしていた（2026/9/23）
   旧 img19sp.png は「人物＋月桂樹」を1枚に焼き込んだ画像で、月桂樹の
   縦横比が 3.6:1。PC版（img19.png）は 2.3:1 なので、スマホだけ
   平たく潰れて見えていた。

   人物は、PCのヒーロー背景（img15.webp）から3人の部分を切り出して
   img19sp_men.webp を作った。PCで見えている範囲とそろう。
   月桂樹はPCと同じ img19.png を、写真の上に絶対配置で重ねる。
   絶対配置なので、月桂樹の大きさを変えても写真の高さは変わらない。 */
@media screen and (max-width: 767px) {
  .m-header .fv .text-area .sp-main-img {
    position: relative;
  }
  .m-header .fv .text-area .sp-main-img .imgArea img {
    display: block;
    width: 100%;
  }
  /* 写真の下端が直線で切れて背景と分かれてしまうので、下だけ溶かす。
     前回は下から32%も溶かして体が消えたので、下端14%だけにする */
  .m-header .fv .text-area .sp-main-img .imgArea img {
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, #000 86%, rgba(0,0,0,0) 100%);
  }
  /* 写真の上に直接置くと月桂樹がスーツに溶けるので、下のほうだけ暗くする。
     旧画像はこの暗がりが焼き込んであった。
     バッジに乗って見えないよう、薄めにして下端も抜く */
  .m-header .fv .text-area .sp-main-img::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    background: linear-gradient(to bottom,
      rgba(12, 42, 68, 0) 0%,
      rgba(12, 42, 68, .40) 46%,
      rgba(12, 42, 68, .58) 84%,
      rgba(12, 42, 68, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }
  /* 月桂樹が3人の顔にかからない位置まで下げる。
     顔の下端は写真の高さの約45%。月桂樹の先端はバッジ画像の上から16%。 */
  .m-header .fv .text-area .sp-main-img .sp-badge {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 64vw;
    margin: 0;
    z-index: 3;
  }
  .m-header .fv .text-area .sp-main-img .sp-badge img {
    display: block;
    width: 100%;
  }
}


/* ⑤「Claude Code/Codexで」を法人セットアップのロゴに差し替えた（2026/9/23）
   「Claude Code / Codex」だけだと他社でも同じなので、
   自社のサービス名で受ける。ロゴは配布物と同じ横長のものを無加工で置く。 */
.front .cta .main-text .imgArea {
  width: clamp(230px, 22vw, 330px);
}
@media screen and (max-width: 1250px) {
  .front .cta .main-text .imgArea { width: clamp(230px, 26vw, 330px); }
}
@media screen and (max-width: 767px) {
  .front .cta .main-text .imgArea { width: 72vw; }
}

/* ⑤「Claude Code/Codexなら」の帯もロゴに（2026/9/23）
   旧 img37 は紺の下向き山形に白文字を焼き込んだ画像だった。
   形はCSSで描き直し、中にロゴを置く。色は元画像から取った #1B2940。 */
.front .aistaznara .top-img {
  display: block;
  width: 100%;
  background: #1B2940;
  padding: 4.2vw 0 12vw;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 4%, 50% 100%, 0 4%);
          clip-path: polygon(0 0, 100% 0, 100% 4%, 50% 100%, 0 4%);
}
.front .aistaznara .top-img img {
  display: block;
  width: 46%;
  max-width: 340px;
  margin: 0 auto;
}
/* 旧画像は「Claude Code/Codex」＋「なら」の2行だった。
   ロゴにしたので「なら」だけ白文字で足す */
.front .aistaznara .top-img__tail {
  display: block;
  margin-top: .5em;
  text-align: center;
  color: #fff;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  font-size: clamp(17px, 4.6vw, 26px);
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .front .aistaznara .top-img {
    padding: 1.6vw 0 5.6vw;
  }
  .front .aistaznara .top-img img { width: 19%; }
}

/* ===================================================================
   ⑥⑦ 吹き出しを画像から文字に（2026/9/23）

   文言を変えるたびに画像を作り直していたので、CSSで描く形にした。
   もくもくは、楕円の本体のまわりに白い円を並べて作る。円の大きさは
   本体の高さに対する%なので、文字が増えて背が伸びても形が保たれる。
   =================================================================== */

/* ---- ⑥ お悩みの吹き出し ---- */
/* 2026/9/23 もくもく（円を並べる形）は見た目が良くなかったので、
   参考どおり「楕円＋小さい丸2つ」にした。
   楕円は角に向かって細くなるので、四角より余白を多めに取らないと
   文字の角がはみ出す。左右18%・上下13%が下限。 */
.front .nayami .text-area {
  width: 100%;
  height: auto;
  position: static;
  display: block;
  padding: 0 2vw;
  box-sizing: border-box;
}
.front .nayami .think {
  position: relative;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .16));
  margin: 0 0 clamp(44px, 11vw, 80px);
}
.front .nayami .think--1 { width: 94%; }
.front .nayami .think--2 { width: 100%; }
.front .nayami .think--3 { width: 96%; margin-left: auto; }
.front .nayami .think:last-child { margin-bottom: 0; }
.front .nayami .think__body {
  position: relative;
  background: #fff;
  border-radius: 50%;
  /* 楕円は縦横比を固定して、文字は中央に置く。
     こうすると文字数が変わっても楕円の形が崩れない */
  aspect-ratio: 1.8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
  box-sizing: border-box;
  text-align: center;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  font-size: clamp(18px, 4.8vw, 26px);
  line-height: 1.8;
  color: #22314a;
}
/* リセットCSSが span に 1.2rem を当てているので、親の大きさを継がせる */
.front .nayami .think__tx { position: relative; font-size: inherit; }
.front .nayami .think__dot {
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.front .nayami .think__dot--1 {
  width: clamp(17px, 4.8vw, 26px); aspect-ratio: 1;
  left: 15%; bottom: clamp(-24px, -5.6vw, -16px);
}
.front .nayami .think__dot--2 {
  width: clamp(10px, 2.9vw, 16px); aspect-ratio: 1;
  left: 8%; bottom: clamp(-42px, -10vw, -30px);
}

/* ---- ⑦ 不安の四角 ---- */
.front .taikenkai .text-area .worry {
  background: #e3e8ee;
  border-radius: clamp(10px, 2.6vw, 14px);
  padding: clamp(15px, 4vw, 22px) clamp(16px, 4.6vw, 26px);
  margin: 0 0 clamp(10px, 2.8vw, 16px);
  text-align: center;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 600;
  font-size: clamp(19px, 4.9vw, 24px);
  line-height: 1.7;
  color: #22314a;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .10);
}
.front .taikenkai .text-area .worry:last-child { margin-bottom: 0; }

/* 楕円も横に広がりすぎると平たく見えるので、PCでは幅を抑えて
   左・右・左に振る（元の画像もその配置だった） */
@media screen and (min-width: 768px) {
  .front .nayami .text-area {
    max-width: 1020px;
    margin: 0 auto;
    padding: 0;
  }
  .front .nayami .think { margin-bottom: clamp(40px, 4.2vw, 64px); }
  .front .nayami .think--1 { width: 47%; margin-left: 2%; }
  .front .nayami .think--2 { width: 49%; margin-left: auto; margin-right: 2%; }
  .front .nayami .think--3 { width: 48%; margin-left: 6%; margin-right: auto; }
}


/* ③ CTAの見出し：ロゴのうしろに「で」を白文字で置く（2026/9/23）
   「Claude Code/Codexで」を自社のサービス名に置き換えたので、
   文としてつながるように助詞を足す */
.front .cta .main-text .cta-logo {
  /* flex は行を占有するので、見出しの1行目として独立する */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25em;
  margin: 0 auto;
}
.front .cta .main-text .cta-logo img {
  display: block;
  width: clamp(200px, 20vw, 300px);
}
.front .cta .main-text .cta-logo__tail {
  color: #fff;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .front .cta .main-text .cta-logo img { width: 62vw; }
  .front .cta .main-text .cta-logo__tail { font-size: clamp(20px, 5.4vw, 30px); }
}

/* ===================================================================
   補助金・助成金の帯（2026/9/28）
   サービス内容の最後、CTAボタンの直前に置く。
   見出しは「対象サービスです」まで。「使えます」とは書かない
   （補助金は審査があり、採択を約束できないため）。
   採択後の契約・後払いといった流れはFAQに書く。
   =================================================================== */
/* 8/17 の旧研修ブロック用に .subsidy（inline-block・オレンジ文字）が残っているので打ち消す */
.section5 .subsidy {
  display: block;
  font-weight: 500;
  color: #fff;
  margin-top: clamp(40px, 4vw, 64px);
  padding: clamp(30px, 3vw, 46px) clamp(18px, 3vw, 44px) clamp(26px, 2.6vw, 38px);
  background: #0f314d;
  border-radius: 18px;
  text-align: center;
}
.section5 .subsidy__pre {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 700;
  letter-spacing: .06em;
  color: #ffc58a;
}
.section5 .subsidy__title {
  margin-top: 6px;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.45;
  color: #fff;
}
.section5 .subsidy__row {
  display: flex;
  gap: 20px;
  margin-top: clamp(22px, 2.2vw, 30px);
  align-items: stretch;
}
.section5 .subsidy__row .subsidy__item {
  flex: 1;
  max-width: none;
  margin: 0;
  padding: 22px 22px 20px;
  background: #fff;
  border: 0;
}
.section5 .subsidy .figure__label {
  font-size: 15px;
  color: #0f314d;
}
/* リセットCSSが span を 1.2rem に固定しているので、すべて明示する */
.section5 .subsidy__old {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #7a8a9a;
}
.section5 .subsidy__max {
  margin-right: 4px;
  font-size: 24px;
  font-weight: 900;
  color: #23201e;
}
.section5 .subsidy__for {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e6ddd4;
  font-size: 12px;
  font-weight: 700;
  color: #7a6c62;
}
.section5 .subsidy__targets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.section5 .subsidy__targets li {
  padding: 5px 12px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #0f314d;
  background: #eef3f7;
  border-radius: 10px;
}
.section5 .subsidy__term {
  display: inline-block;
  font-size: inherit;
}
.section5 .subsidy__both {
  margin-top: clamp(20px, 2vw, 26px);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
}
.section5 .subsidy__note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .68);
}
@media screen and (max-width: 767px) {
  .section5 .subsidy { border-radius: 14px; }
  .section5 .subsidy__row { flex-direction: column; gap: 12px; }
  .section5 .subsidy__row .subsidy__item { padding: 16px 14px; }
  .section5 .subsidy .figure__label { font-size: 14px; }
  .section5 .subsidy__max { font-size: 18px; }
  .section5 .subsidy__targets li { font-size: 13px; }
}

/* ===================================================================
   研修・伴走支援のカード：数字ブロックの位置を左右で揃える（2026/9/29）
   説明文の行数が左右で違うため、数字ブロックが上下にずれていた。
   タイトル／写真／説明文／数字ブロック／残り の5段を subgrid で
   左右共通の行にする。カリキュラム・契約期間から下は .price-block__rest に
   まとめて1段にしてあるので、カードの途中に穴は空かない。
   subgrid が使えないブラウザは、これまでどおりの flex のまま。
   =================================================================== */
.section5 .price-block__rest > *:last-child { margin-bottom: 0; }
.section5 .price-block__rest > .price-caution { margin-top: 20px; }
@supports (grid-template-rows: subgrid) {
  @media screen and (min-width: 901px) {
    .section5 .option-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 24px;
      row-gap: 0;
    }
    .section5 .option-grid > .price-block {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
  /* 補助金の帯の2枚も同じ考え方。タブレット幅で左の制度名が2行になっても、
     数字の位置を左右で揃える */
  @media screen and (min-width: 768px) {
    .section5 .subsidy__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 20px;
      row-gap: 0;
    }
    .section5 .subsidy__row .subsidy__item {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    /* 行が伸びてもチップを縦に引き伸ばさない */
    .section5 .subsidy__targets { align-self: start; }
  }
}