@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/ress@4.0.0/dist/ress.min.css");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP&display=swap");
p, a, span, small {
  font-family: "Noto Sans JP", sans-serif; }

.mo img {
  width: 100%; }
.mo .title {
  background-color: #004b88;
  padding: 18px; }
.mo--header {
  height: 64px;
  background-color: #004b88;
  position: fixed;
  z-index: 105;
  width: 100vw; }
  .mo--header h1 {
    height: 64px;
    padding-top: 6px;
    padding-left: 6px; }
    .mo--header h1 img {
      width: auto; }
  .mo--header .gnav {
    display: block; }
    .mo--header .gnav.open ul {
      transform: translateX(-300px); }
    .mo--header .gnav ul {
      position: fixed;
      height: calc( 100vh - 64px);
      width: 300px;
      right: -300px;
      top: 64px;
      transform: translateX(0);
      background-color: #001248;
      transition: transform 0.3s ease;
      z-index: 120;
      list-style-type: none; }
      .mo--header .gnav ul li a {
        height: 64px;
        line-height: 64px;
        text-align: center;
        display: block;
        color: #fff;
        font-weight: bold;
        text-decoration: none; }
      .mo--header .gnav ul li:last-child {
        background-color: #e83100; }
        .mo--header .gnav ul li:last-child a {
          color: #fff; }
    .mo--header .gnav .gnav-btn {
      position: fixed;
      z-index: 100;
      height: 64px;
      width: 64px;
      padding: 16px;
      top: 0;
      right: 0;
      cursor: pointer; }
.mo--visual {
  padding: 54px 0; }
  .mo--visual .slider {
    aspect-ratio: 845 / 1276; }
  .mo--visual .text {
    background-color: #FEF8F1;
    padding: 18px; }
.mo--seminar {
  padding: 54px 0;
  background-color: #FEF8F1; }
  .mo--seminar .title img {
    display: block;
    width: 60%;
    margin: 0 auto; }
  .mo--seminar .text {
    padding: 32px 18px; }
  .mo--seminar .content {
    padding: 0 32px; }
    .mo--seminar .content img {
      margin-bottom: 32px; }
  .mo--seminar .cv-button {
    width: 100%;
    padding: 0 18px 18px; }
    .mo--seminar .cv-button img {
      display: block;
      width: 100%; }
.mo--hesitation {
  padding: 54px 0;
  background-color: #ECF4E0; }
  .mo--hesitation .content {
    background-color: #001248;
    padding: 32px 32px 0;
    font-size: 0; }
  .mo--hesitation .text {
    padding: 32px 18px; }
  .mo--hesitation .cv-button {
    width: 100%;
    padding: 0 18px 18px; }
    .mo--hesitation .cv-button img {
      display: block;
      width: 100%; }
  .mo--hesitation .next-button {
    display: block;
    width: 30%;
    margin: 0 auto;
    padding: 18px 0; }
.mo--graph {
  padding: 54px 0;
  background-color: #001248;
  padding: 32px;
  font-size: 0; }
  .mo--graph .wrap {
    background-color: #FEF8F1;
    padding: 32px 0;
    border-radius: 16px; }
  .mo--graph .graph img {
    padding: 16px; }
  .mo--graph .text {
    padding: 16px; }
  .mo--graph .cv-button {
    display: block;
    width: 100%;
    padding: 16px; }
    .mo--graph .cv-button img {
      width: 100%; }
.mo--strong-point {
  padding: 54px 0;
  background-color: #FEF8F1;
  padding-bottom: 32px; }
  .mo--strong-point .title img {
    display: block;
    width: 65%;
    margin: 0 auto; }
  .mo--strong-point .text {
    padding: 32px 18px; }
  .mo--strong-point .content {
    padding: 0 18px; }
    .mo--strong-point .content img {
      margin-bottom: 32px; }
  .mo--strong-point .cv-button {
    display: block;
    width: 100%;
    padding: 0 18px; }
    .mo--strong-point .cv-button img {
      width: 100%; }
.mo--company-voice {
  padding: 54px 0;
  background-color: #FEF8F1; }
  .mo--company-voice .title {
    padding: 32px 0;
    background-color: #00000000; }
  .mo--company-voice .text {
    padding: 32px; }
  .mo--company-voice .wrap {
    padding: 0 18px; }
    .mo--company-voice .wrap .box {
      margin-bottom: 32px; }
      .mo--company-voice .wrap .box > img {
        width: 100%; }
.mo--howto {
  padding: 54px 0;
  background-color: #F0F0EF; }
  .mo--howto .title img {
    width: 35%;
    display: block;
    margin: 0 auto; }
  .mo--howto .wrap {
    padding: 18px; }
    .mo--howto .wrap .box {
      margin-bottom: 18px; }
      .mo--howto .wrap .box a {
        font-size: 0; }
  .mo--howto .cv-button {
    width: 100%;
    padding: 0 18px 18px; }
    .mo--howto .cv-button img {
      width: 100%; }
.mo--company-info {
  padding: 54px 0;
  background-color: #F0F0EF;
  overflow: hidden; }
  .mo--company-info .title img {
    width: 30%;
    display: block;
    margin: 0 auto; }
  .mo--company-info .content img {
    width: 120%; }
.mo--contact {
  padding: 54px 0;
  background-color: #ECF4E0; }
  .mo--contact .title img {
    width: 53%;
    display: block;
    margin: 0 auto; }
  .mo--contact .text {
    padding: 32px 18px; }
  .mo--contact .wrap {
    padding: 18px; }
    .mo--contact .wrap .box {
      width: 100%;
      background-color: #fff;
      border-radius: 32px;
      padding: 18px;
      margin-bottom: 32px; }
      .mo--contact .wrap .box > img {
        display: block;
        width: 100%;
        margin: 0 auto 32px; }
      .mo--contact .wrap .box a {
        display: block;
        margin: 0 auto 32px; }
      .mo--contact .wrap .box:first-child {
        background-color: #FBE1DE; }
      .mo--contact .wrap .box:last-child a:first-child {
        width: 80%;
        display: block;
        margin-right: auto;
        margin-left: 0; }
      .mo--contact .wrap .box:nth-child(2) a:last-child, .mo--contact .wrap .box:nth-child(3) a:last-child {
        width: 40%;
        margin-bottom: 0;
        margin-right: 0; }
.mo--footer {
  padding: 54px 18px 128px;
  background-color: #004b88; }
  .mo--footer .logo {
    width: 30%;
    margin-bottom: 18px; }
  .mo--footer .wrap {
    margin: 32px 0; }
    .mo--footer .wrap::after {
      content: "";
      display: block;
      clear: both; }
    .mo--footer .wrap .service {
      float: left;
      width: 50%; }
    .mo--footer .wrap .contact {
      float: right;
      width: 50%; }
    .mo--footer .wrap p {
      color: #fff;
      margin-bottom: 6px; }
      .mo--footer .wrap p:nth-child(1) {
        font-size: 90%;
        font-weight: bold;
        text-decoration: underline; }
    .mo--footer .wrap a {
      display: block;
      color: #fff; }
  .mo--footer .link a {
    display: block;
    color: #fff;
    margin-bottom: 6px; }
.mo .copy {
  display: block;
  padding: 32px 0 128px;
  text-align: center;
  background-color: #ff9c35; }
.mo .footercv {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100svw;
  height: auto; }
  .mo .footercv img {
    display: block;
    width: 90svw;
    margin: 1% auto 32px; }

@keyframes scrollBackground {
  0% {
    background-position: -5% -10%; }
  100% {
    background-position: 10% 1%;
    /* 下方向に移動 */ } }
@keyframes backcolor {
  0% {
    background-color: #001248; }
  100% {
    background-color: #abd5ff; } }
.pc {
  background-color: #001248;
  background-image: url("../img/back.png");
  background-size: contain;
  /* ラインの高さ */
  background-repeat: repeat;
  /* アニメーションの設定 */
  animation: scrollBackground 60s linear infinite,backcolor 3s infinite; }
  .pc img {
    width: 100%; }
  .pc .title {
    background-color: #004b88;
    padding: 18px; }
  .pc--header {
    background-color: #004b88;
    height: 64px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1010; }
    .pc--header .wrap {
      max-width: 1080px;
      margin: 0 auto; }
    .pc--header h1 {
      float: left;
      display: block;
      width: 110px;
      height: 48px; }
      .pc--header h1 img {
        width: auto;
        height: 38px;
        margin-left: 9px;
        margin-top: 11px; }
    .pc--header nav {
      float: right;
      display: block; }
      .pc--header nav ul li {
        display: inline-block;
        list-style: none; }
        .pc--header nav ul li a {
          display: inline-block;
          text-decoration: none;
          height: 64px;
          line-height: 64px;
          padding: 0 .5vw;
          color: #fff;
          font-size: 14px; }
        .pc--header nav ul li:last-child {
          background-color: #e83100; }
          .pc--header nav ul li:last-child a {
            color: #FEDC00; }
        @media screen and (min-width: 1080px) {
          .pc--header nav ul li a {
            padding: 0 16px; }
          .pc--header nav ul li:last-child a {
            padding: 0 32px; } }
  .pc--visual {
    max-width: 1080px;
    padding-top: 64px;
    margin: 0 auto;
    position: relative; }
    .pc--visual .slider {
      display: block;
      width: 100%;
      aspect-ratio: 1469 / 862;
      overflow: hidden; }
      .pc--visual .slider img {
        scale: 1.02; }
    .pc--visual a {
      position: absolute;
      width: 26%;
      right: 0;
      bottom: 3%; }
  .pc--seminar {
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 64px;
    background-color: #fff; }
    .pc--seminar .title {
      font-size: 0; }
      .pc--seminar .title img {
        width: 60%; }
    .pc--seminar .text-link {
      padding: 32px; }
      .pc--seminar .text-link::after {
        display: block;
        content: "";
        clear: both; }
      .pc--seminar .text-link .text {
        float: left;
        width: 60%; }
      .pc--seminar .text-link a {
        float: right;
        width: 30%; }
    .pc--seminar .wrap {
      padding: 0 32px 32px; }
      .pc--seminar .wrap img {
        display: inline-block;
        width: 23%;
        margin-right: 2%; }
        .pc--seminar .wrap img:last-child {
          margin-right: 0; }
  .pc--hesitation {
    max-width: 1080px;
    padding-top: 64px;
    margin: 0 auto; }
    .pc--hesitation .wrap {
      width: 90%;
      margin: 0 auto;
      font-size: 0; }
    .pc--hesitation .bar {
      background-color: #ECF4E0;
      padding: 32px 96px; }
      .pc--hesitation .bar::after {
        content: "";
        display: block;
        clear: both; }
      .pc--hesitation .bar > img {
        width: 50%;
        float: left; }
      .pc--hesitation .bar > div {
        width: 40%;
        float: right; }
        .pc--hesitation .bar > div a {
          display: block; }
          .pc--hesitation .bar > div a:last-child {
            width: 50%;
            margin: 18px auto 0; }
  .pc--graph {
    max-width: 1080px;
    padding-top: 64px;
    padding-bottom: 48px;
    margin: 0 auto; }
    .pc--graph .wrap {
      width: 90%;
      margin: 0 auto;
      padding: 32px 0;
      font-size: 0;
      background-color: #fff;
      border-radius: 24px; }
      .pc--graph .wrap .title {
        font-size: 0; }
        .pc--graph .wrap .title img {
          width: 60%;
          margin-left: 80px; }
      .pc--graph .wrap .box {
        padding: 32px 64px 0; }
        .pc--graph .wrap .box p {
          width: 76%;
          margin: 16px 0; }
  .pc--strong-point {
    max-width: 1080px;
    padding-top: 64px;
    margin: 0 auto;
    background-color: #F0F0EF; }
    .pc--strong-point .title {
      font-size: 0; }
      .pc--strong-point .title img {
        width: 60%;
        margin-left: 16px; }
    .pc--strong-point .wrap {
      padding: 24px 32px; }
      .pc--strong-point .wrap::after {
        content: "";
        display: block;
        clear: both; }
      .pc--strong-point .wrap .text {
        display: block;
        width: 45%;
        float: left;
        margin-top: 1%; }
      .pc--strong-point .wrap a {
        display: block;
        width: 35%;
        float: right; }
    .pc--strong-point .content {
      padding: 0 32px 32px; }
      .pc--strong-point .content img {
        display: inline-block;
        width: 23%;
        margin-right: 2%; }
        .pc--strong-point .content img:last-child {
          margin-right: 0; }
  .pc--company-voice {
    max-width: 1080px;
    padding-top: 64px;
    margin: 0 auto;
    background-color: #FBE1DE; }
    .pc--company-voice .title {
      background-color: #00000000;
      padding: 32px 0; }
      .pc--company-voice .title img:last-child {
        display: block;
        width: 85%;
        margin: 32px auto 0; }
    .pc--company-voice .wrap {
      padding: 0 32px 32px; }
      .pc--company-voice .wrap .box {
        margin-bottom: 32px; }
  .pc--howto {
    max-width: 1080px;
    padding-top: 64px;
    padding-bottom: 32px;
    margin: 0 auto;
    background-color: #F0F0EF; }
    .pc--howto .title {
      font-size: 0; }
      .pc--howto .title img {
        width: 20%;
        margin-left: 16px; }
    .pc--howto .content {
      display: block;
      width: 85%;
      margin: 0 auto;
      padding: 32px 32px 0; }
      .pc--howto .content .box {
        margin-bottom: 32px; }
    .pc--howto > a {
      display: block;
      width: 78.5%;
      margin: 0 auto; }
  .pc--company-info {
    max-width: 1080px;
    padding-top: 64px;
    margin: 0 auto;
    background-color: #FEF8F1;
    overflow: hidden; }
    .pc--company-info > img {
      scale: 1.02; }
    .pc--company-info .wrap {
      display: block;
      margin: 0 auto;
      width: 85%;
      padding: 32px 0; }
      .pc--company-info .wrap img {
        width: 110%; }
  .pc--contact {
    max-width: 1080px;
    margin: 0 auto;
    background-color: #ECF4E0;
    padding: 32px;
    padding-top: 64px; }
    .pc--contact .title {
      font-size: 0; }
      .pc--contact .title img {
        width: 30%;
        margin-left: 46px; }
    .pc--contact .text {
      margin-left: 64px;
      padding: 24px 0;
      width: 50%; }
    .pc--contact .long-wrap {
      background-color: #FBE1DE;
      padding: 24px;
      border-radius: 24px; }
      .pc--contact .long-wrap::after {
        content: "";
        display: block;
        clear: both; }
      .pc--contact .long-wrap .left {
        width: 55%;
        float: left; }
      .pc--contact .long-wrap .right {
        width: 40%;
        float: right; }
        .pc--contact .long-wrap .right a {
          width: 90%;
          margin: 18px auto 0; }
      .pc--contact .long-wrap a {
        display: block;
        margin-top: 18px; }
    .pc--contact .wrap::after {
      content: "";
      display: block;
      clear: both; }
    .pc--contact .wrap > .left {
      display: block;
      float: left;
      width: 48%;
      background-color: #fff;
      margin-top: 32px;
      padding: 24px;
      border-radius: 24px; }
      .pc--contact .wrap > .left .left {
        width: 22%;
        display: block;
        float: left; }
      .pc--contact .wrap > .left .right {
        width: 65%;
        display: block;
        float: right; }
    .pc--contact .wrap > .right {
      display: block;
      float: right;
      width: 48%;
      aspect-ratio: 361 / 177;
      background-color: #fff;
      margin-top: 32px;
      padding: 24px;
      border-radius: 24px; }
      .pc--contact .wrap > .right .left {
        width: 22%;
        display: block;
        float: left; }
      .pc--contact .wrap > .right .right {
        width: 65%;
        display: block;
        float: right; }
        .pc--contact .wrap > .right .right p {
          display: block;
          font-size: 1.3vw; }
          @media screen and (min-width: 1080px) {
            .pc--contact .wrap > .right .right p {
              font-size: 16px;
              line-height: 1.6; }
              .pc--contact .wrap > .right .right p span {
                margin-bottom: 6px; } }
          .pc--contact .wrap > .right .right p span {
            display: block;
            font-size: 120%;
            margin-bottom: 0.8vw; }
        .pc--contact .wrap > .right .right a {
          display: block;
          font-size: 1.3vw;
          color: #000;
          margin: 3px 0; }
          @media screen and (min-width: 1080px) {
            .pc--contact .wrap > .right .right a {
              font-size: 17px;
              line-height: 1.6; } }
  .pc--footer {
    max-width: 1080px;
    padding-top: 64px;
    margin: 0 auto;
    background-color: #004b88;
    padding: 32px;
    color: #fff; }
    .pc--footer a {
      color: #fff;
      text-decoration: none; }
    .pc--footer .logo::after {
      display: block;
      content: "";
      clear: both;
      height: 32px; }
    .pc--footer .logo img:nth-child(1) {
      width: 15%;
      float: left; }
    .pc--footer .logo img:nth-child(2) {
      margin-left: 3%;
      width: 50%;
      margin-top: 4%;
      float: left; }
    .pc--footer .info {
      width: 30%;
      float: left; }
    .pc--footer .wrap {
      width: 50%;
      float: right; }
      .pc--footer .wrap div {
        width: 45%; }
      .pc--footer .wrap .service {
        float: left;
        margin-bottom: 32px; }
        .pc--footer .wrap .service p, .pc--footer .wrap .service a {
          display: inline-block;
          font-size: 1.4vw;
          line-height: 1.6; }
          @media screen and (min-width: 1080px) {
            .pc--footer .wrap .service p, .pc--footer .wrap .service a {
              font-size: 16px;
              line-height: 1.6; } }
          .pc--footer .wrap .service p:first-child, .pc--footer .wrap .service a:first-child {
            text-decoration: underline;
            display: block; }
      .pc--footer .wrap .contact {
        float: right;
        margin-bottom: 32px; }
        .pc--footer .wrap .contact p {
          font-size: 1.4vw;
          line-height: 1.6; }
          @media screen and (min-width: 1080px) {
            .pc--footer .wrap .contact p {
              font-size: 16px;
              line-height: 1.6; } }
          .pc--footer .wrap .contact p:first-child {
            text-decoration: underline; }
    .pc--footer .link {
      clear: both;
      display: flex;
      justify-content: space-evenly; }
      .pc--footer .link a {
        font-size: 1.4vw;
        line-height: 1.6;
        text-decoration: underline;
        font-weight: bold;
        color: #fff; }
        @media screen and (min-width: 1080px) {
          .pc--footer .link a {
            font-size: 16px;
            line-height: 1.6; } }
  .pc .copy {
    display: block;
    text-align: center;
    background-color: #ff9c35;
    font-size: 10px;
    padding: 16px 0; }

.togglehowto {
  cursor: pointer;
  overflow: hidden; }

.togglehowto .question img {
  display: block;
  width: 100%; }

.togglehowto .answer {
  height: 1px;
  transition: height 0.3s ease, opacity 1s;
  opacity: 0; }

.togglehowto.active .answer {
  height: auto;
  opacity: 1; }

.togglehowto.active .question {
  height: 0; }

.togglehowto .answer {
  min-height: 1px; }

.togglehowto .answer img {
  display: block;
  width: 100%; }

.cv-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  /* はみ出る光を隠す */
  line-height: 0; }

.cv-button > img {
  display: block;
  height: auto; }

/* ツヤ（光）のオーバーレイ要素 */
.cv-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  /* 開始位置を左外側に */
  width: 100%;
  height: 100%;
  /* 斜めの光の筋 */
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%);
  /* アニメーション：1.2秒かけて1回だけ実行 */
  animation: shine 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  /* 画像へのクリックを邪魔しない */
  pointer-events: none; }

/* 光が左から右へ駆け抜ける動き */
@keyframes shine {
  0% {
    left: -150%; }
  70% {
    left: 150%; }
  100% {
    left: 150%; } }
.slider {
  position: relative;
  width: 100%;
  overflow: hidden; }

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像の比率を保って表示 */
  /* アニメーションの設定：6秒かけてループ（3秒×2枚分） */
  animation: fade 6s infinite; }
  .slider img:nth-child(1) {
    animation-delay: 0s; }
  .slider img:nth-child(2) {
    animation-delay: -3s; }

@keyframes fade {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  /* ふわっと表示 */
  45% {
    opacity: 1; }
  /* 表示を維持 */
  55% {
    opacity: 0; }
  /* ふわっと消える */
  100% {
    opacity: 0; } }
.go-to-top {
  position: fixed;
  right: 20px;
  bottom: 102px;
  z-index: 9999;
  opacity: 0;
  /* 最初は隠す */
  visibility: hidden;
  /* クリックできないようにする */
  transition: all 0.3s;
  /* ふわっと表示させるアニメーション */ }

/* 表示クラス（JSで切り替え） */
.go-to-top.is-show {
  opacity: 1;
  visibility: visible; }

.go-to-top img {
  width: 50px;
  /* 画像のサイズは適宜調整してください */
  height: auto; }

/*# sourceMappingURL=style.css.map */
