@charset "UTF-8";
/* fv */
.fv.bg_dot {
  background-color: #ed582d;
  background-image: radial-gradient(#707070 1%, transparent 20%);
  background-size: 15px 15px;
  padding-top: 62px;
  position: relative;
  top: 0;
}
.fv.bg_dot::before {
  position: absolute;
  background-color: #343b86;
  content: "";
  width: 100%;
  height: 590px;
  bottom: -111px;
  border-style: solid;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 82%, 0 93%);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 0 93%);
  padding: 60px 0 10px 0;
}
.fv .inner {
  position: relative;
  width: 950px;
  display: block;
  margin: 0 auto;
}

.fv-main-img {
  width: 100%;
  margin: 66px auto 0;
  position: relative;
  height: 508px;
}

.fv-main-inner {
  display: block;
  margin: 0 auto;
  /* position: absolute; */
  left: 0;
  right: 0;
  width: fit-content;
}
.fv-main-title {
  width: 498px;
}
.fv-sub-title {
  width: 411px;
  margin: 30px auto 10px;
}
.fv-contens-main {
  width: 100%;
  display: block;
  margin: 0 auto;
  position: absolute;
  bottom: -67px;
  left: 0;
  right: 0;
}

.fv-theme-inner {
  margin: 30px auto 0;
  height: 472px;
  display: block;
  position: relative;
  top: 85px;
}

.fv-theme-title {
  width: 308px;
  margin: 0 auto;
}
.fv-theme-text {
  font-size: 22px;
  display: block;
  margin: 30px auto 0;
  color: #fff8f3;
  text-align: center;
  font-weight: 500;
  line-height: 2em;
}

.fv-theme-text .pc-none {
  display: none;
}

.fv-theme-text p:nth-child(2) {
  margin-top: 10px;
}

.bg-text-box {
  width: 100%;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 0;
}

.fv-theme-text .accent {
  display: inline-block;
  line-height: 1.4em;
  padding-bottom: 2px;
  background: #ed582d;
}
.fv-theme-text .accent.first {
  padding-left: 4px;
}

.bg-text-box img {
  width: 100%;
}

.bg-text-box .bg-side-01 {
  position: absolute;
  top: 10px;
  left: -3px;
  width: 108px;
}
.bg-text-box .bg-side-02 {
  position: absolute;
  top: 128px;
  left: 0;
  width: 129px;
}
.bg-text-box .bg-side-03 {
  position: absolute;
  top: 13px;
  right: 55px;
  width: 106px;
}
.bg-text-box .bg-side-04 {
  position: absolute;
  top: 176px;
  right: 0;
  width: 128px;
}

@media (max-width: 1400px) {
  .fv-main-img {
    height: calc(508vw / 1100 * 100);
    margin-top: calc(55vw / 1100 * 100);
  }
  .fv-logo {
    top: calc(264vw / 1100 * 100);
    left: calc(108vw / 1100 * 100);
    width: calc(411vw / 1100 * 100);
  }

  .fv-main-txt {
    top: calc(85vw / 1100 * 100);
    left: calc(102vw / 1100 * 100);
    font-size: calc(40vw / 1100 * 100);
  }

  .fv-sub-txt {
    top: calc(202vw / 1100 * 100);
    left: calc(161vw / 1100 * 100);
    font-size: calc(26vw / 1100 * 100);
  }

  .fv-contens-main {
    /* width: calc(950vw / 1100 * 100); */
  }
  .fv-main-title {
    width: calc(498vw / 1100 * 100);
  }
  .fv-sub-title {
    width: calc(411vw / 1100 * 100);
  }
  fv-theme-inner .set-box {
    margin-top: 97px;
  }
}

@media (max-width: 1100px) {
  .fv .inner {
    width: 80%;
    left: 0;
    right: 0;
  }

  .fv-theme-inner {
    width: 100%;
  }

  .fv-theme-text {
    font-size: calc(22vw / 1100 * 100);
  }
  .bg-text-box img {
    width: 70%;
    z-index: 1;
  }

  .bg-text-box .bg-side-01 {
    position: absolute;
    top: 10px;
    left: -3px;
  }
  .bg-text-box .bg-side-02 {
    position: absolute;
    top: calc(282vw / 1100 * 100);
    left: calc(-54vw / 1100 * 100);
  }
  .bg-text-box .bg-side-03 {
    position: absolute;
    top: 13px;
    right: 55px;
  }
  .bg-text-box .bg-side-04 {
    position: absolute;
    top: calc(289vw / 1100 * 100);
    right: 0;
  }
}

@media (max-width: 750px) {
  .fv .inner {
    width: 100%;
    height: 100%;
  }

  .fv.bg_dot {
    background-color: none;
    background-image: none;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: calc(507vw / 750 * 100);
  }
  .fv-logo {
    top: calc(285vw / 750 * 100);
    left: calc(95vw / 750 * 100);
    width: calc(535vw / 750 * 100);
  }

  .fv-main-title {
    width: 85%;
    margin: 0 auto 19px;
    padding-top: 9%;
  }
  .fv-main-txt {
    top: calc(45vw / 750 * 100);
    left: 0;
    right: 0;
    font-size: calc(55vw / 750 * 100);
  }

  .fv-sub-txt {
    top: calc(211vw / 750 * 100);
    left: 0;
    right: 0;
    font-size: calc(36vw / 750 * 100);
    text-align: center;
  }

  .fv-main-img {
    width: 100%;
    margin-top: 0;
    padding-bottom: calc(614vw / 750 * 100);
  }
  .fv-sub-title {
    width: 88%;
    /* padding-bottom: calc(125vh / 750* 100); */
    position: relative;
  }
  .fv-contens-main {
    width: 63%;
    left: 0;
    right: 0;
    bottom: calc(-22vw / 750 * 100);
    position: relative;
  }
  .fv-theme-inner {
    top: calc(290vw / 750 * 100);
    height: auto;
  }

  .fv-theme-inner .set-box {
    /* margin-top: calc(-5vw / 750* 100); */
    /* position: relative; */
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: space-between;
  }
  .bg-text-box img {
    width: 89%;
  }
  .bg-text-box p {
    padding: 0;
    margin: 0;
  }

  .bg-text-box .bg-side-01 {
    top: calc(43vw / 750 * 100);
    left: 0;
    width: 24%;
  }
  .bg-text-box .bg-side-02 {
    top: calc(43vw / 750 * 100);
    left: calc(325vw / 750 * 100);
    width: 23%;
  }
  .bg-text-box .bg-side-03 {
    top: calc(0vw / 750 * 100);
    right: calc(272vw / 750 * 100);
    width: 28%;
  }
  .bg-text-box .bg-side-04 {
    top: 0;
    right: 0;
    width: 26%;
  }

  .bg-text-box {
    width: 92%;
    position: relative;
    top: calc(18vw / 750 * 100);
    left: 0;
    right: 0;
    display: block;
    margin: 0 auto;
  }

  .fv-theme-text {
    font-size: calc(24vw / 750 * 100);
    text-align: left;
    padding: 0 7%;
    line-height: 1.75em;
  }

  .fv-theme-text p:nth-child(2) {
    margin-top: calc(40vw / 750 * 100);
  }

  .fv-theme-text .pc-none {
    display: block;
  }
  .fv-theme-title {
    width: 65%;
  }

  .fv.bg_dot::before {
    height: calc(962vw / 750 * 100);
    bottom: calc(-236vw / 750 * 100);
  }
  .fv-theme-text .sp-none {
    display: none;
  }
}

@media (max-width: 640px) {
  .fv-main-img {
    width: 100%;
    margin-top: 0;
    padding-bottom: 0;
    height: auto;
  }
  .fv-contens-main {
    width: 80%;
    height: auto;
  }
  .fv.bg_dot {
    padding-bottom: calc(275vw / 750 * 100);
  }
  .fv.bg_dot::before {
    bottom: calc(-244vw / 450 * 100);
    height: calc(876vw / 450 * 100);
  }
  .fv-theme-inner {
    top: 0;
    height: auto;
    /* display: flex; */
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: baseline;
    align-content: space-around;
  }
  .fv-theme-title {
    padding-top: calc(5vw / 750 * 100);
  }

  .fv-theme-text {
    font-size: calc(33vw / 750 * 100);
  }
  .fv-theme-inner .set-box {
    bottom: calc(68vw / 750 * 100);
  }
}
@media (max-width: 375px) {
  .fv-contens-main {
    width: 75%;
  }
  .fv.bg_dot::before {
    bottom: calc(-250vw / 450 * 100);
  }
  .fv-theme-text {
    font-size: calc(33vw / 750 * 100);
  }
  .fv-theme-inner .set-box {
    margin-top: calc(33vw / 750 * 100);
  }
}

/* notice */
.notice {
  background-color: #e5e5e5;
  padding: 15px 0;
}

.notice-txt {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

.notice-txt a {
  text-decoration: underline;
}

.notice-txt a:hover {
  text-decoration: none;
}

@media (max-width: 1100px) {
  .notice {
    padding: calc(15vw / 1100 * 100) 0;
  }

  .notice-txt {
    font-size: calc(22vw / 1100 * 100);
  }
}

@media (max-width: 750px) {
  .notice {
    padding: calc(40vw / 750 * 100) 0;
  }

  .notice-txt {
    font-size: calc(32vw / 750 * 100);
  }
}

/* campany-logo-area */
.campany-logo-area {
  padding: 25px 0 60px;
  overflow-x: hidden;
}

.campany-logo-list {
  display: flex;
}

.campany-logo-item {
  animation: slide-loop 25s infinite linear 0.5s both;
}

.reverse .campany-logo-item {
  animation: slide-loop-reverse 25s infinite linear 0.5s both;
}

.campany-logo-item img {
  width: auto;
  height: 77px;
}

@media (max-width: 1100px) {
  /* .campany-logo-area {
	  padding: calc(10vw / 1100 * 100) 0;
	} */

  .campany-logo-item img {
    height: calc(77vw / 1100 * 100);
  }
}

@media (max-width: 750px) {
  .campany-logo-area {
    padding: calc(40vw / 750 * 100) 0 calc(60vh / 750 * 100);
  }

  .campany-logo-item img {
    height: calc(77vw / 750 * 100);
  }
}

.link-line {
  width: 100%;
  height: 100px;
  background-color: rgb(254, 57, 0, 50%);
  backdrop-filter: blur(4px);
  position: fixed;
  padding: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: +8;
}

.link-line .link-area .left_img {
  width: 137px;
  margin-right: 26px;
}
.link-line .link-area .righ_img {
  width: 101px;
  margin-left: 20px;
}

.link-line.fixed.fadeOut {
  opacity: 0;
  animation-name: fadeOut;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation: fadeup 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeup {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}

.link-line.fixed.fadeOut.none {
  display: none;
}

.link-line .link-area {
  position: absolute;
  color: #fff;
  top: 0;
  bottom: 0;
  font-weight: bold;
  display: flex;
  margin-left: -15px;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin: auto;
  align-content: space-between;
  justify-content: center;
  font-size: 19px;
}

.link-line .link-area .about-txt {
  margin-right: 15px;
}

.link-line .link-area .about-btn a {
  background-color: #00c7b8;
  border-radius: 40px;
  padding: 13px 28px;
  display: block;
  color: #ffffff;
  border: #fff solid 4px;
  box-shadow: 0 0 6px #ccc;
}

.link-line .link-area .about-btn a:hover {
  background-color: #ffffff;
  color: #00c7b8;
  border-radius: 40px;
  padding: 13px 28px;
  display: block;
  border: #00c7b8 solid 4px;
  box-shadow: 0 0 6px #ccc;
}

@media (max-width: 1100px) {
}

@media (max-width: 900px) {
  .link-line .link-area .about-txt {
    font-size: calc(16vw / 900 * 100);
    margin-right: calc(8vw / 900 * 100);
  }
  .link-line .link-area .about-btn a {
    font-size: calc(16vw / 900 * 100);
  }
  .link-line .link-area .left_img {
    margin-right: calc(16vw / 900 * 100);
  }
  .link-line .link-area .right_img {
    margin-left: calc(16vw / 900 * 100);
  }
}

@media (max-width: 750px) {
  .link-line {
    height: calc(197vw / 750 * 100);
  }

  .link-line .link-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-betwe;
  }

  .link-line .link-area .about-btn a {
    padding: calc(19vw / 750 * 100) calc(78vw / 750 * 100);
    font-size: calc(34vw / 900 * 100);
  }
  .link-line .link-area .about-btn a:hover {
    padding: calc(19vw / 750 * 100) calc(78vw / 750 * 100);
  }
  .link-line .link-area .about-txt {
    margin-right: calc(-22vw / 750 * 100);
    margin-bottom: calc(15vw / 750 * 100);
    font-size: calc(26vw / 750 * 100);
  }
  .link-line .link-area .left_img {
    display: none;
  }
  .link-line .link-area .righ_img {
    display: none;
  }
}

/* subject */
.subject {
  padding: 150px 0 115px; /*2411変更*/
  text-align: center;
  background-color: #fff8f3;
  -webkit-clip-path: polygon(0 2%, 105% 0, 100% 96%, 0 98%);
  clip-path: polygon(0 2%, 105% 0, 100% 96%, 0 98%);
}

.subject-head {
  font-size: 32px;
  font-weight: bold;
}

.subject-head .accent {
  font-size: 35px;
  color: #ed582d;
}

.subject-box-list {
  display: flex;
  justify-content: space-between;
  margin-top: 75px;
}

.subject-box {
  background-color: #fff;
  width: 295px;
  border-radius: 10px;
  border: 2px solid #efefef;
}

.subject-box-top {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff8f3;
  width: 100%;
  height: 147px;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
  clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
}

.subject-box-head {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.subject-box-head .accent {
  color: #ed582d;
}

.subject-box-img {
  width: 210px;
  height: 150px;
  margin: 20px auto 10px;
}

.subject-box:nth-child(3) .subject-box-img {
  width: 180px;
}

.subject-box-txt {
  width: 230px;
  margin: 0 auto;
  padding-bottom: 30px;
  line-height: 1.8;
  text-align: left;
}

.subject .about-example-box {
  position: relative;
  text-align: left;
  border: #343b86 solid 4px;
  border-radius: 20px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 12px 14px 0 0 rgb(0 0 104 / 7%);
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

.subject .about-example-box:hover {
  transform: scale(1.025);
  cursor: pointer;
}

.subject .about-example-box.none::after {
  display: none;
}

.subject .inner {
  margin-bottom: 105px;
}

.subject .about-example-box-img {
  width: 455px;
  margin-right: 50px;
}

.subject .about-example-box-txt-area {
  width: 455px;
}

.subject .about-example-box-txt-area .about-example-box-head {
  display: block;
  font-size: 34px;
  line-height: 1.9em;
  font-weight: bold;
  color: #fff8f3;
  width: 100%;
  position: absolute;
  top: -35px;
  left: 0;
  text-align: center;
}
.subject .about-example-box-txt-area .about-example-box-head .bg-line {
  padding: 12px 25px;
  background: #343b86;
  width: 100%;
  line-height: 1.9em;
}

.subject .about-example-box-txt-area .about-example-box-head .add {
  padding-left: 20px;
}
.subject .about-example-box-txt-area .about-example-box-head .add-right {
  padding-right: 20px;
}
.subject .about-example-box-txt-area .about-example-box-head .add-left {
  margin-left: -12px;
}

.subject .about-example-box-txt-area .about-example-box-txt {
  font-size: 22px;
  line-height: 1.65;
  color: #343b86;
  font-weight: bold;
}

.subject .about-example-box .search-btn {
  font-size: 25px;
  color: #ffffff;
  font-weight: bold;
  background-color: #ed582d;
  width: 230px;
  height: 58px;
  border-radius: 20px 0 16px 0;
  padding: 18px 10px 10px 20px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.subject .about-example-box .search-btn img {
  width: 80%;
}
.subject .about-example-box .search-btn::after {
  position: absolute;
  content: "";
  background: url(../images/pc/search-item.png) no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  right: 13px;
}

/* modal */
.modal .inner.aruaru {
  width: 1100px;
}
.modal .inner.aruaru .modal-box {
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* padding-bottom: 16vh; */
  scroll-snap-align: start;
}
.modal .inner.aruaru .modal-box::-webkit-scrollba {
  display: none;
}
.modal .about-set-box .about-example-box {
  position: relative;
  text-align: left;
  border: #343b86 solid 4px;
  border-radius: 20px 20px 0 0;
  padding: 11px;
  background-color: #ffffff;
  top: 115px;
}
.modal .about-set-box .about-example-box:nth-of-type(1)::before {
  content: "";
  border: 12px solid transparent;
  border-top: 10px solid #343b86;
  top: 103%;
  left: 50%;
  position: absolute;
}
.modal .about-set-box .about-example-box:nth-of-type(1)::after {
  content: "";
  border: 12px solid transparent;
  border-top: 10px solid #343b86;
  top: 107%;
  left: 50%;
  position: absolute;
}
.modal .about-set-box .about-example-box.solution-add {
  position: relative;
  text-align: left;
  border: #ed582d solid 4px;
  border-radius: 0 0 20px 20px;
  padding: 20px;
  background-color: #ffffff;
  top: 198px;
  margin-top: 28px;
  margin-bottom: 130px;
}

.modal .about-set-box .about-example-box.solution-add .about-example-box-head {
  top: -72px;
  left: 8px;
}

.modal
  .about-set-box
  .about-example-box.solution-add
  .about-example-box-head
  .bg-line {
  background: #ed582d;
  padding: 9px 20px;
}

.modal
  .about-set-box
  .about-example-box.solution-add
  .about-example-box-head
  .bg-line
  .add-right {
  padding-right: 20px;
}
.modal
  .about-set-box
  .about-example-box.solution-add
  .about-example-box-head
  .bg-line
  .add-left {
  padding-left: 20px;
}

.modal .about-example-box-txt-area {
  width: 50%;
}
.modal .about-example-box-txt-area .about-example-box-head {
  display: block;
  font-size: 28px;
  line-height: 1.9em;
  font-weight: bold;
  color: #fff8f3;
  width: 100%;
  position: absolute;
  top: -29px;
  left: 0;
  text-align: center;
}

.modal .about-set-box .about-example-box .about-example-box-img {
  width: 50%;
}
.modal .about-example-box-txt-area .about-example-box-txt {
  font-size: 22px;
  line-height: 1.7em;
  color: #343b86;
  font-weight: bold;
  margin-left: 45px;
}

.modal .about-example-box-txt-area .about-example-box-head .bg-line {
  padding: 9px 25px;
  background: #343b86;
  width: 100%;
}
.modal
  .about-set-box
  .about-example-box.solution-add
  .about-example-box-txt-area
  .about-example-box-txt {
  color: #ed582d;
}
.modal
  about-example-box.solution-add
  .about-example-box-txt-area
  .about-example-box-head
  .bg-line {
  background: #ed582d;
}

.subject .case-box {
  width: 100%;
}

.modal-box.subject-add {
  background-color: rgba(0, 0, 0, 0.01);
  width: 95%;
  height: 90vh;
  padding: 0 0 50px;
}

.modal-box.subject-add .about-set-box {
  background-color: #fff8f3;
  border-radius: 20px;
  padding: 50px 50px 120px;
  height: auto;
  position: relative;
  margin-top: 85px;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
.about-set-box .set-title {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: -85px;
  left: 0;
  right: 0;
}
.about-set-box .set-title img {
  width: 48%;
  text-align: center;
}
.modal-box.subject-add .link-area {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  margin-left: -15px;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  padding-bottom: 10vh;
}

.modal-box.subject-add .link-area .about-txt {
  margin-right: 15px;
}

.modal-box.subject-add .link-area .modal-about-btn a {
  background-color: #00c7b8;
  border-radius: 40px;
  padding: 13px 28px;
  display: block;
  border: #00c7b8 solid 1px;
}

.modal-box.subject-add .link-area .modal-about-btn a:hover {
  background-color: #ffffff;
  color: #00c7b8;
  border-radius: 40px;
  padding: 13px 28px;
  display: block;
  border: #00c7b8 solid 1px;
}

.modal-btn-close.about-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: initial;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.modal .inner .modal-btn-close.second {
  top: 0;
  right: -30px;
}

@media (max-width: 1100px) {
  .subject {
    padding: calc(120vw / 1100 * 100) 0 calc(94vw / 1100 * 100);
    -webkit-clip-path: polygon(0 1%, 100% 0, 100% 96%, 0 97%);
    clip-path: polygon(0 1%, 100% 0, 100% 96%, 0 97%);
  }
  .subject .inner {
    /* margin-bottom: calc(10vw / 1100 * 100); */
  }
  .subject-box {
    width: calc(295vw / 1100 * 100);
    border-radius: calc(10vw / 1100 * 100);
    border: calc(2vw / 1100 * 100) solid #efefef;
  }

  .subject-box-top {
    height: calc(147vw / 1100 * 100);
    padding-bottom: calc(10vw / 1100 * 100);
    font-size: calc(20vw / 1100 * 100);
  }

  .subject-box-head {
    margin-top: calc(20vw / 1100 * 100);
    font-size: calc(20vw / 1100 * 100);
  }

  .subject-box-img {
    width: calc(210vw / 1100 * 100);
    height: calc(150vw / 1100 * 100);
    margin: calc(20vw / 1100 * 100) auto calc(10vw / 1100 * 100);
  }

  .subject-box:nth-child(3) .subject-box-img {
    width: calc(180vw / 1100 * 100);
  }
  .subject .about-example-box::after {
    background-image: none;
  }
  .subject .about-example-box-txt-area .about-example-box-head {
    font-size: calc(31vw / 1100 * 100);
  }
  .subject .about-example-box .search-btn {
    font-size: inherit;
    width: calc(229vw / 1100 * 100);
    height: auto;
    padding: 2%;
  }
  .subject .about-example-box .search-btn::after {
    background-size: 100%;
    right: calc(15vw / 1100 * 100);
  }

  .modal .inner .modal-btn-close.second {
    top: 0;
    right: calc(-50vw / 1100 * 100);
  }

  .modal .inner.aruaru {
    width: calc(1000vw / 1100 * 100);
  }
  .modal .about-set-box .about-example-box {
    top: calc(96vw / 1100 * 100);
  }
  .modal .about-set-box .about-example-box.solution-add {
    top: calc(187vw / 1100 * 100);
  }

  .modal-box.subject-add .about-set-box {
    padding-bottom: calc(110vw / 1100 * 100);
  }
}

@media (min-width: 750px) and (max-width: 900px) {
  .subject {
    margin-top: calc(-30vw / 900 * 100); /*20240905追記*/
    /* padding: calc(215vw / 900 * 100) 0 calc(70vw / 900 * 100); */
  }
  .subject .about-example-box-txt-area .about-example-box-head {
    font-size: calc(24vw / 900 * 100);
  }
  .subject .about-example-box-txt-area .about-example-box-txt {
    font-size: calc(21vw / 900 * 100);
  }
  .modal .about-set-box .about-example-box:nth-of-type(1)::before {
    top: 104%;
  }
  .modal .about-set-box .about-example-box:nth-of-type(1)::after {
    top: 109%;
  }

  .modal .about-set-box .about-example-box.solution-add {
    top: calc(168vw / 900 * 100);
  }
}

@media (max-width: 750px) {
  .subject {
    margin-top: calc(-60vw / 750 * 100); /*20240905追記*/
    padding: calc(175vw / 750 * 100) 0 calc(52vw / 750 * 100);
    -webkit-clip-path: polygon(0 1%, 100% 0, 100% 98%, 0 99%);
    clip-path: polygon(0 1%, 100% 0, 100% 98%, 0 99%);
  }

  .subject .inner {
    margin-bottom: calc(169vw / 759 * 100);
  }
  .subject-box-head {
    margin-top: calc(45vw / 750 * 100);
    font-size: calc(40vw / 750 * 100);
  }

  .subject-box-img {
    width: calc(380vw / 750 * 100);
    height: auto;
    margin: calc(45vw / 750 * 100) auto;
  }

  .subject-box:nth-child(3) .subject-box-img {
    width: calc(290vw / 750 * 100);
  }

  .subject-box-txt {
    width: calc(580vw / 750 * 100);
    padding-bottom: calc(55vw / 750 * 100);
    font-size: calc(28vw / 750 * 100);
    line-height: 1.6;
  }

  .subject .about-example-box {
    padding: calc(45vw / 750 * 100) calc(10vw / 750 * 100);
    border-radius: 13px;
    box-shadow: 6px 8px 0 0 rgb(0 0 104 / 10%);
  }

  .subject .about-example-box-img {
    width: 100%;
  }
  .subject .about-example-box-txt-area {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    text-align: center;
    padding-bottom: calc(59vw / 750 * 100);
    font-size: calc(19vw / 750 * 100);
  }

  .modal
    .about-set-box
    .about-example-box.solution-add
    .about-example-box-head {
    top: calc(-111vw / 750 * 100);
  }

  .subject .about-example-box .search-btn {
    width: calc(347vw / 750 * 100);
    height: auto;
    padding: 4% 2% 2% 6%;
    border-radius: 13px 0 8px 0;
  }

  .subject .about-example-box .search-btn::after {
    background-size: 84%;
    right: calc(12vw / 750 * 100);
  }

  .subject .about-example-box-txt-area .about-example-box-head {
    font-size: calc(42vw / 750 * 100);
    line-height: 1.75em;
  }
  .subject .about-example-box-txt-area .about-example-box-txt {
    font-size: calc(34vw / 750 * 100);
    line-height: 1.45;
    margin-top: calc(10vw / 750 * 100);
    margin-bottom: calc(15vw / 750 * 100);
  }
  .subject .about-example-box-txt-area.blue .about-example-box-head .bg-line {
    padding: 10px 20px;
  }
  .subject .about-example-box-txt-area .about-example-box-head .add {
    padding-left: 20px;
  }
  .task-head .pc-none {
    display: block;
  }
  .subject .about-example-box-txt-area .about-example-box-head .bg-line {
    padding: 12px 20px;
  }
  .subject .about-example-box-txt-area .about-example-box-head .add-left {
    padding-left: calc(71vw / 750 * 100);
  }

  .subject .about-example-box-txt-area .about-example-box-head.two-line {
    top: calc(-119vw / 750 * 100);
  }
  .modal-box.subject-add {
    border-radius: 12px;
    height: 100vh;
  }
  .about-set-box .set-title img {
    width: 84%;
  }
  .modal .about-set-box .set-title {
    top: calc(-95vw / 750 * 100) !important;
  }

  .modal-box.subject-add .about-set-box {
    padding: calc(50vw / 750 * 100) calc(50vw / 750 * 100)
      calc(207vw / 750 * 100);
    margin-top: calc(125vw / 750 * 100);
  }
  .modal .about-example-box-txt-area {
    width: 100%;
  }

  .modal .inner.aruaru .modal-btn-close.second {
    width: 45px;
    height: 45px;
    position: fixed;
    background-color: #333;
    border-radius: 0 0 0 10px !important;
    right: 0;
    top: 0;
    z-index: 2;
  }

  .modal .about-example-box-txt-area .about-example-box-head {
    font-size: calc(33vw / 750 * 100);
    top: calc(-48vw / 750 * 100);
  }
  .modal .about-example-box-txt-area .about-example-box-head.two-line {
    top: calc(-103vw / 750 * 100);
  }
  .modal .about-set-box .about-example-box {
    border-radius: 12px 12px 0 0;
    border: #343b86 solid 3px;
    margin-top: calc(25vw / 750 * 100);
    top: calc(166vw / 750 * 100);
  }
  .modal .about-set-box .about-example-box.solution-add {
    border: #ed582d solid 3px;
    border-radius: 0 0 12px 12px;
    margin-top: calc(68vw / 750 * 100);
    top: calc(288vw / 750 * 100);
  }
  .modal .about-set-box .about-example-box:nth-of-type(1)::before {
    top: 103%;
    left: 49%;
  }
  .modal .about-set-box .about-example-box:nth-of-type(1)::after {
    top: 107%;
    left: 49%;
  }
  .modal-box.subject-add .link-area {
    bottom: calc(-192vw / 750 * 100);
    font-size: calc(33vw / 750 * 100);
    margin: 0 auto;
    width: 90%;
    align-items: center;
    flex-direction: column;
    margin-top: calc(50vw / 750 * 100);
    padding-bottom: calc(150vw / 750 * 100);
  }
  .modal .about-example-box-txt-area .about-example-box-txt {
    margin-left: 0 !important;
    font-size: calc(27vw / 750 * 100) !important;
    text-align: center;
    margin-bottom: calc(27vw / 750 * 100);
  }

  .modal-box.subject-add .link-area .about-txt {
    margin-right: 0;
    font-size: calc(30vw / 750 * 100);
    margin-bottom: calc(17vw / 750 * 100);
  }
  .modal-box.subject-add .link-area .about-btn a {
    padding: calc(19vw / 750 * 100) calc(78vw / 750 * 100);
  }
  .subject .about-example-box:hover {
    transform: none;
    transition: none;
  }
  .modal
    .about-set-box
    .about-example-box
    .about-example-box-head
    .bg-line
    .add-right {
    padding-right: 20px;
  }
  .modal
    .about-set-box
    .about-example-box
    .about-example-box-head
    .bg-line
    .add-left {
    padding-left: 20px;
  }
}

@media (max-width: 450px) {
  .modal-box.subject-add .about-set-box {
    padding-bottom: calc(72vw / 450 * 100);
  }
}

@media (min-width: 750px) {
  .subject
    .about-example-box-txt-area
    .about-example-box-head.two-line
    .add.left-none {
    padding-left: 0;
  }
  .subject
    .about-example-box-txt-area
    .about-example-box-head.two-line
    .add-right.none {
    padding-right: 0;
  }
}

@media (min-width: 450px) and (max-width: 750px) {
  .case-head.common-sec-head {
    margin-top: calc(20vw / 950 * 100) !important;
  }
}

.task .inner {
  width: 1100px;
  display: flex;
  flex-direction: row;
  align-content: stretch;
  justify-content: flex-end;
  align-items: stretch;
  margin-top: 35px;
}

.task-head {
  font-size: 42px;
  font-weight: bold;
  color: #343b86;
  text-align: center;
  line-height: 1.25;
}

.task-head .accent {
  color: #ed582d;
}

.task-head .pc-none {
  display: none;
}

.task-head.logo {
  margin: 40px 0 0;
  text-align: left;
}

.task-head.logo img {
  width: 75%;
}

.task .txt-area .task-txt {
  font-weight: bold;
  color: #343b86;
  font-size: 26px;
}
.task .txt-area .task-txt.small {
  font-size: 20px;
}

/* solution */
.solution {
  padding: 0 0 20px;
  text-align: center;
  position: relative;
}

.solution::before {
  position: absolute;
  background-color: #ed582d;
  content: "";
  width: 100%;
  height: 653px;
  top: -140px;
  left: 0;
  right: 0;
  margin: auto;
  border-style: solid;
  -webkit-clip-path: polygon(0 0, 100% 14%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 14%, 100% 100%, 0 100%);
  padding: 0 0 10px 0;
  display: block;
}

.solution-box-list {
  width: 32%;
}

.solution-box-list .task-title {
  color: #343b86;
  margin-bottom: 10px;
  font-size: 18px;
}

.solution-box {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 335px;
}

.solution-box-top {
  background-color: #fff3eb;
  padding: 10px;
  font-size: 16px;
  height: 105px;
  border-radius: 10px;
  color: #343b86;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  align-content: space-around;
  justify-content: center;
  align-items: center;
}

.solution-box-top::before {
  content: "";
  border: 12px solid transparent;
  border-top: 11px solid #fff3eb;
  margin-left: -12px;
  top: 99%;
  left: 51%;
  position: absolute;
}

.solution-box .task-sub-txt {
  font-size: 14px;
  text-align: left;
  margin-top: 10px;
}

.solution-box-head {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.solution-box-head .accent {
  color: #ed582d;
}

.task-box-img {
  width: 530px;
  display: block;
  text-align: center;
}

.task-box-img,
.txt-area {
  position: relative;
  z-index: 1;
}

.solution-box:nth-child(3) .task-box-img {
  width: 180px;
}

.solution-box-txt {
  width: 230px;
  margin: 0 auto;
  padding-bottom: 30px;
  line-height: 1.8;
  text-align: left;
}
.solution .inner {
  display: flex;
  justify-content: space-between;
  position: relative;
  top: -10px;
}

.solution .side-text-box {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
}

.solution .side-text-box p {
  background-image: url("/tanomu/contents/assets/images/pc/hexagon_bg.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 185px;
  height: 210px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: stretch;
}
.solution .side-text-box .text-side-01 {
  font-size: 20px;
  top: 76px;
  left: 34px;
}
.solution .side-text-box .text-side-02 {
  font-size: 17px;
  top: 305px;
  left: 20px;
  z-index: 2;
}
.solution .side-text-box .text-side-03 {
  font-size: 20px;
  top: 77px;
  right: 30px;
  z-index: 3;
}
.solution .side-text-box .text-side-04 {
  font-size: 20px;
  top: 336px;
  right: 28px;
  z-index: 2;
}
.solution .side-text-box .text-side-05 {
  font-size: 19px;
  top: 504px;
  left: 122px;
}
.solution .side-text-box .text-side-06 {
  font-size: 20px;
  top: 505px;
  right: 161px;
  z-index: 2;
}

@media (max-width: 1100px) {
  .solution {
    padding: calc(10vw / 1100 * 100) 0 calc(125vh / 1100 * 100);
  }

  .task-head {
    font-size: calc(45vw / 1100 * 100);
  }

  .task .inner {
    width: calc(950vw / 1100 * 100);
    margin-right: calc(30vw / 1100 * 100);
    align-items: baseline;
  }
  .task .txt-area .task-txt {
    font-size: calc(24vw / 1100 * 100);
  }
  .task .txt-area .task-txt.small {
    font-size: calc(20vw / 1100 * 100);
  }
  .task-head.logo {
    margin: calc(30vw / 1100 * 100) 0 0;
  }

  .solution::before {
    -webkit-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
  }
  *,
  ::before,
  ::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
  }
  .solution-box-head {
    margin-top: calc(20vw / 1100 * 100);
    font-size: calc(20vw / 1100 * 100);
  }

  .task-box-img {
    margin: calc(20vw / 1100 * 100) auto calc(10vw / 1100 * 100);
  }

  .solution-box:nth-child(3) .task-box-img {
    width: calc(180vw / 1100 * 100);
  }

  .solution-box-txt {
    width: calc(230vw / 1100 * 100);
    padding-bottom: calc(30vw / 1100 * 100);
  }
  .solution .side-text-box .text-side-01 {
    top: 39px;
    left: 9px;
  }
  .solution .side-text-box .text-side-03 {
    top: 44px;
    right: 30px;
  }
  .solution .side-text-box .text-side-05 {
    top: calc(510vw / 1100 * 100);
    left: calc(178vw / 1100 * 100);
  }
  .solution .side-text-box .text-side-06 {
    top: calc(505vw / 1100 * 100);
    right: calc(245vw / 1100 * 100);
  }
}
@media (min-width: 900px) and (max-width: 950px) {
  .solution .side-text-box p {
    width: 20%;
    font-size: calc(15vw / 900 * 100) !important;
  }
}
@media (min-width: 750px) and (max-width: 950px) {
  .solution {
    padding-top: 0;
    padding-bottom: calc(22vw / 900 * 100);
  }
  .solution .side-text-box p {
    width: 22%;
    font-size: calc(19vw / 900 * 100) !important;
  }
  .solution .side-text-box .text-side-02 {
    font-size: calc(17vw / 900 * 100) !important;
    top: 246px;
    left: 0;
  }

  .solution-box {
    height: calc(330vw / 900 * 100);
  }

  .solution-box-top::before {
    top: 99%;
  }
  .solution .side-text-box .text-side-04 {
    top: 228px;
    right: 0;
  }
  .solution-box-list .task-title {
    color: #343b86;
    margin-bottom: 10px;
    font-size: calc(17vw / 900 * 100);
  }
}
@media (max-width: 750px) {
  .solution {
    padding: calc(23vw / 750 * 100) 0 calc(93vw / 750 * 100);
    background-color: #ed582d;
  }

  .solution .inner {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .solution-box-list {
    width: 88%;
    margin-top: calc(100vw / 750 * 100);
  }

  .solution-box-list:nth-of-type(1) {
    margin-top: 0;
  }

  .solution-box {
    padding: 30px 30px;
    height: auto;
  }

  .solution-box-top {
    font-size: calc(33vw / 750 * 100);
    padding: calc(20vw / 750 * 100);
    height: calc(181vw / 750 * 100);
    margin-bottom: calc(27vw / 750 * 100);
  }

  .solution-box-list .task-title {
    font-size: calc(44vw / 750 * 100);
    margin-bottom: calc(47vw / 750 * 100);
  }

  .solution-box .task-sub-txt {
    font-size: calc(32vw / 750 * 100);
    margin-top: calc(40vw / 750 * 100);
  }

  .solution-box-top::before {
    border: 9px solid transparent;
    border-top: 9px solid #fff3eb;
    margin-left: -9px;
  }

  .solution-box-img {
    width: 90%;
    margin: 0 auto;
  }

  .task-head {
    width: calc(605vw / 750 * 100);
    font-size: calc(50vw / 750 * 100);
    margin: 0 auto;
  }

  .task-head.logo {
    width: calc(527vw / 750 * 100);
    margin: calc(46vw / 750 * 100) auto calc(50vw / 750 * 100);
    text-align: center;
  }

  .task-head.logo img {
    width: 100%;
  }

  .task-box-img {
    height: auto;
    margin: calc(25vw / 750 * 100) auto 0;
    width: 100%;
  }

  .task .txt-area .task-txt {
    font-size: calc(35vw / 750 * 100);
  }
  .task .txt-area .task-txt.small {
    font-size: calc(30vw / 750 * 100);
  }
  .task .txt-area {
    margin: calc(65vw / 750 * 100) auto 0;
  }
  .task .inner {
    width: 100%;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    text-align: center;
    margin: 0 auto;
  }

  .solution .side-text-box {
    width: 73%;
    height: auto;
    /*  display: block;*/
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
    top: calc(-107vw / 750 * 100);
    flex-wrap: wrap;
  }
  .solution .side-text-box p {
    position: initial;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: stretch;
  }

  .solution .side-text-box .text-side-02 {
    z-index: 0;
    font-size: calc(16vw / 900 * 100);
  }

  .solution::before {
    top: calc(-300vw / 750 * 100);
  }
}

@media (max-width: 450px) {
  .solution .side-text-box {
    width: 95%;
    top: calc(-86vw / 450 * 100);
  }
  .solution .side-text-box p {
    width: 45%;
    height: 176px;
  }
  .solution .side-text-box .text-side-01 {
    font-size: calc(37vw / 750 * 100);
    top: calc(433vw / 750 * 100);
    left: calc(64vw / 750 * 100);
  }
  .solution .side-text-box .text-side-02 {
    font-size: calc(27vw / 750 * 100);
    top: calc(764vw / 750 * 100);
    left: calc(64vw / 750 * 100);
  }
  .solution .side-text-box .text-side-03 {
    font-size: calc(29vw / 750 * 100);
    top: calc(433vw / 750 * 100);
    right: calc(64vw / 750 * 100);
  }
  .solution .side-text-box .text-side-04 {
    font-size: calc(29vw / 750 * 100);
    top: calc(764vw / 750 * 100);
    right: calc(64vw / 750 * 100);
  }
  .solution .side-text-box .text-side-05 {
    font-size: calc(29vw / 750 * 100);
    top: calc(1091vw / 750 * 100);
    left: calc(64vw / 750 * 100);
  }
  .solution .side-text-box .text-side-06 {
    font-size: calc(29vw / 750 * 100);
    top: calc(1091vw / 750 * 100);
    right: calc(64vw / 750 * 100);
  }
  .case .case-head.common-sec-head {
    margin-top: 0;
    padding-top: 0;
  }
  .solution::before {
    /* bottom: calc(-128vh / 750 * 100);
	height: calc(720vh / 750 * 100); */
  }
}

@media (max-width: 375px) {
  .solution .side-text-box {
    top: calc(-75vw / 375 * 100);
  }
  /* .solution::before {
	bottom: calc(-145vw / 375 * 100);
	height: calc(820vw / 375 * 100);
	} */
}

@media (min-width: 750px) and (max-width: 900px) {
  .case {
    padding-top: calc(72vh / 900 * 100) !important;
  }
  .solution::before {
    bottom: calc(-101vw / 900 * 100);
    height: calc(659vw / 900 * 100);
  }
  .case-head.common-sec-head {
    margin-top: calc(20vw / 950 * 100) !important;
  }
}

/* about */
.about {
  background-color: #fff8f3;
  padding: 110px 0 170px;
}

.about-head {
  font-size: 34px;
  font-weight: bold;
  color: #ed582d;
  text-align: center;
}

.about-head .accent {
  font-size: 35px;
  color: #ed582d;
}

.about-box-list {
  display: flex;
  justify-content: space-between;
  margin-top: 75px;
}

.about-box {
  background-color: #fff;
  width: 295px;
  padding: 15px 0 25px;
  border: 2px solid #efefef;
  border-radius: 5px;
}

.about-box-head {
  margin-top: 16px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.about-box-head .accent {
  color: #ed582d;
}

.about-box-img {
  width: 160px;
  height: 115px;
  margin: 20px auto 0;
}

.about-box:nth-child(2) .about-box-img {
  width: 90px;
}

.about-box:nth-child(3) .about-box-img {
  width: 220px;
}

.about-box-txt {
  width: 230px;
  margin: 15px auto 0;
  line-height: 1.8;
  text-align: left;
}

.about-example {
  margin-top: 65px;
}

.about-example-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about-example-box-name {
  margin-top: 10px;
  font-weight: bold;
}

.about-example-box-txt {
  line-height: 1.7;
}

.about-example-link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
}

.about-example-link::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
  transform: rotate(45deg);
}

.about-example-btn {
  margin: 35px auto 0;
}

@media (max-width: 1100px) {
  .about {
    padding: calc(110vw / 1100 * 100) 0 calc(170vw / 1100 * 100);
  }

  .about-head {
    font-size: calc(34vw / 1100 * 100);
  }

  .about-head .accent {
    font-size: calc(35vw / 1100 * 100);
  }

  .about-box-list {
    margin-top: calc(75vw / 1100 * 100);
  }

  .about-box {
    width: calc(295vw / 1100 * 100);
    padding: calc(15vw / 1100 * 100) 0 calc(25vw / 1100 * 100);
    border: calc(2vw / 1100 * 100) solid #efefef;
    border-radius: calc(5vw / 1100 * 100);
  }

  .about-box-head {
    margin-top: calc(16vw / 1100 * 100);
    font-size: calc(20vw / 1100 * 100);
  }

  .about-box-img {
    width: calc(160vw / 1100 * 100);
    height: calc(115vw / 1100 * 100);
    margin: calc(20vw / 1100 * 100) auto 0;
  }

  .about-box:nth-child(2) .about-box-img {
    width: calc(90vw / 1100 * 100);
  }

  .about-box:nth-child(3) .about-box-img {
    width: calc(220vw / 1100 * 100);
  }

  .about-box-txt {
    width: calc(230vw / 1100 * 100);
    margin: calc(15vw / 1100 * 100) auto 0;
  }

  .about-example {
    margin-top: calc(65vw / 1100 * 100);
  }

  .about-example-box {
    padding: calc(30vw / 1100 * 100);
  }

  .about-example-box-img {
    width: calc(300vw / 1100 * 100);
  }

  .about-example-box-txt-area {
    width: calc(510vw / 1100 * 100);
  }

  .about-example-box-head {
    font-size: calc(24vw / 1100 * 100);
  }

  .about-example-box-name {
    margin-top: calc(10vw / 1100 * 100);
  }

  .about-example-box-txt {
    /* margin-top: calc(25vw / 1100 * 100); */
  }

  .modal .about-example-box-txt-area .about-example-box-txt {
    margin-top: 0;
    margin-left: calc(45vw / 1100 * 100);
    font-size: calc(23vw / 1100 * 100);
  }

  .modal .about-set-box .set-title {
    top: calc(-87vw / 1100 * 100);
  }
  .about-example-link {
    margin-top: calc(20vw / 1100 * 100);
  }

  .about-example-link::after {
    width: calc(10vw / 1100 * 100);
    height: calc(10vw / 1100 * 100);
    margin-left: calc(10vw / 1100 * 100);
    border-top: calc(1vw / 1100 * 100) solid #333333;
    border-right: calc(1vw / 1100 * 100) solid #333333;
  }

  .modal-box.subject-add {
    width: 100%;
  }

  .about-example-btn {
    margin: calc(35vw / 1100 * 100) auto 0;
  }
}

@media (max-width: 750px) {
  .about {
    padding: calc(110vw / 750 * 100) 0 calc(130vw / 750 * 100);
  }

  .about-head {
    font-size: calc(50vw / 750 * 100);
  }

  .about-head .accent {
    font-size: calc(35vw / 750 * 100);
  }

  .about-box-list {
    display: block;
    margin-top: calc(75vw / 750 * 100);
  }

  .about-box {
    width: 100%;
    padding: calc(65vw / 750 * 100) 0 calc(45vw / 750 * 100);
    border: calc(2vw / 750 * 100) solid #efefef;
    border-radius: calc(5vw / 750 * 100);
  }

  .about-box + .about-box {
    margin-top: calc(60vw / 750 * 100);
  }

  .about-box-head {
    margin-top: calc(45vw / 750 * 100);
    font-size: calc(34vw / 750 * 100);
    line-height: 1.6;
  }

  .about-box-img {
    width: calc(240vw / 750 * 100);
    height: auto;
    margin: 0 auto;
  }

  .about-box:nth-child(2) .about-box-img {
    width: calc(190vw / 750 * 100);
    transform: translateX(calc(29vw / 750 * 100));
  }

  .about-box:nth-child(3) .about-box-img {
    width: calc(340vw / 750 * 100);
  }

  .about-box-txt {
    width: calc(580vw / 750 * 100);
    margin: calc(25vw / 750 * 100) auto 0;
    font-size: calc(27vw / 750 * 100);
  }

  .about-example {
    margin-top: calc(55vw / 750 * 100);
  }

  .about-example-box {
    display: block;
    padding: calc(45vw / 750 * 100);
  }

  .about-example-box-img {
    width: 100% !important;
  }

  .about-example-box-txt-area {
    width: 100%;
    margin-top: calc(40vw / 750 * 100);
    font-size: calc(27vw / 750 * 100);
  }

  .about-example-box-head {
    font-size: calc(33vw / 750 * 100);
    line-height: 1.6;
  }

  .about-example-box-name {
    margin-top: calc(30vw / 750 * 100);
  }

  .about-example-box-txt {
    margin-top: calc(25vw / 750 * 100);
  }

  .about-example-link {
    margin-top: calc(15vw / 750 * 100);
    padding-right: calc(20vw / 750 * 100);
    font-size: calc(28vw / 750 * 100);
  }

  .about-example-link::after {
    width: calc(15vw / 750 * 100);
    height: calc(15vw / 750 * 100);
    margin-left: calc(10vw / 750 * 100);
    border-top: calc(1vw / 750 * 100) solid #333333;
    border-right: calc(1vw / 750 * 100) solid #333333;
  }

  .about-example-btn {
    margin: calc(85vw / 750 * 100) auto 0;
  }
}

/* hint */
.hint {
  position: relative;
  margin: 0 auto;
  background-color: #fff8f3;
  padding-bottom: 100px;
  top: 0;
}

.hint-contents-area {
  padding: 54px 0 0;
  background-color: #ed582d;
  margin: 0 auto;
}

.hint-head {
  position: relative;
  font-family: "NOTO SANS JP";
  width: 53%;
  margin: 0 auto;
}

.hint-head .hint-box-img {
  width: 86%;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: flex-end;
  margin: 0 auto;
  justify-content: space-evenly;
}

.hint-head .hint-box-img img {
  z-index: 3;
  left: 0;
  right: 63px;
  top: -27px;
  width: inherit;
}

.hint-head .hint-box-img .add-no {
  font-size: 42px;
  font-weight: bold;
  color: #343b86;
  display: inline-block;
}

.hint-head .hint-sub-title {
  margin-top: 12px;
  padding: 0 0 15px;
  font-size: 46px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}

.hint .hint-sub-text {
  margin-top: -10px;
  padding: 15px 0 25px;
  font-size: 26px;
  color: #343b86;
  text-align: center;
  font-weight: bold;
  position: relative;
}

.hint .hint-sub-text::before {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  margin: auto;
  background-image: url(/tanomu/contents/assets/images/pc/line01.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 164px;
  height: 4px;
}
.hint .inner {
  width: 950px;
  position: relative;
  display: block;
  margin: -50px auto 0;
  padding: 50px 0;
}

.hint .sub-box {
  position: relative;
  width: 267px;
  height: auto;
  right: -70%;
  top: -86px;
}
.hint .sub-box img {
  width: 100%;
}

.hint .hint-contents-img {
  width: 647px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
}
.hint .hint-contents-img img {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.hint .sub-box .hint-fukidashi-text {
  padding: 0 0 24px;
  font-size: 22px;
  color: #343b86;
  text-align: center;
  font-weight: bold;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  display: flex;
  align-content: space-around;
  justify-content: center;
  align-items: center;
}

.hint .sub-box .hint-fukidashi-text .accent {
  color: #ed582d;
}

@media (max-width: 1100px) {
  .hint {
    padding-bottom: calc(90vw / 1100 * 100);
  }

  .hint-head .hint-sub-title {
    font-size: calc(40vw / 1100 * 100);
  }
  .hint-head img {
    width: calc(700vw / 1100 * 100);
    display: block;
  }

  .hint::before {
    height: calc(500vh / 1100 * 100);
  }
  .hint .inner {
    width: 70%;
    margin: -50px auto 0;
    padding: 50px 0;
  }
  .hint .sub-box {
    width: calc(267vw / 1100 * 100);
  }
  .hint .hint-contents-img {
    width: calc(627vw / 1100 * 100);
    margin: 0 auto;
  }
  .hint-head .hint-box-img .add-no {
    font-size: calc(34vw / 1100 * 100);
  }
  .hint .sub-box .hint-fukidashi-text {
    font-size: calc(22vw / 1100 * 100);
  }
}

@media (min-width: 750px) and (max-width: 950px) {
  .hint .sub-box {
    right: calc(-479vw / 900 * 100);
  }
  .hint .sub-box .hint-fukidashi-text {
    font-size: calc(18vw / 900 * 100);
    padding-bottom: calc(14vw / 900 * 100);
  }
  .hint-head .hint-sub-title {
    font-size: calc(32vw / 900 * 100);
  }
}
@media (max-width: 750px) {
  .hint {
    padding: calc(2vw / 750 * 100) 0 0;
  }

  .hint::before {
    height: calc(542vh / 750 * 100);
  }

  .hint-head img {
    width: 100%;
  }
  .hint .inner {
    width: 100%;
  }

  .hint .hint-contents-img {
    width: 70%;
    position: relative;
    bottom: calc(-145vw / 750 * 100);
  }

  .hint-head {
    width: 56%;
    margin: 0 auto;
  }

  .hint-head .hint-box-img img {
    margin: 0 auto;
    left: calc(-56vw / 750 * 100);
    right: 0;
    top: calc(-19vw / 750 * 100);
  }
  .hint-head .hint-box-img .add-no {
    font-size: calc(38vw / 750 * 100);
    right: calc(17vw / 750 * 100);
    top: calc(-4vw / 750 * 100);
  }

  .hint-head .hint-sub-title {
    font-size: calc(44vw / 750 * 100);
    margin-top: calc(9vw / 750 * 100);
  }
  .hint .hint-sub-text {
    font-size: 18px;
  }

  .hint .sub-box {
    width: 52%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: calc(-286vw / 750 * 100);
  }

  .hint .sub-box img {
    width: 100%;
  }

  .hint-contents-area {
    height: calc(553vw / 750 * 100);
  }
  .hint .sub-box .hint-fukidashi-text {
    font-size: calc(22vw / 750 * 100);
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-bottom: calc(18vw / 750 * 100);
  }
  .hint .sub-box .hint-fukidashi-text .sp-none {
    display: none;
  }
}

@media (max-width: 450px) {
  .hint-head .hint-sub-title {
    font-size: calc(68vw / 750 * 100);
  }
  .hint .hint-sub-text {
    font-size: 18px;
  }
  .hint .sub-box {
    width: 81%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: calc(-195vw / 450 * 100);
  }

  .hint .sub-box img {
    width: 100%;
  }
  .hint-contents-area {
    height: calc(497vw / 450 * 100);
  }
  .hint-head {
    width: 85%;
  }
  .hint-head .hint-box-img img {
    left: calc(-69vw / 750 * 100);
    right: 0;
    top: calc(-19vw / 750 * 100);
  }
  .hint-head .hint-box-img .add-no {
    font-size: calc(52vw / 750 * 100);
    right: calc(23vw / 750 * 100);
    top: calc(7vw / 750 * 100);
  }
  .hint .sub-box .hint-fukidashi-text {
    font-size: calc(18vh / 750 * 100);
    padding-bottom: calc(13vh / 750 * 100);
  }
  .hint .hint-contents-img {
    bottom: calc(-136vw / 450 * 100);
    width: 81%;
  }
}

@media (max-width: 375px) {
  .hint .sub-box {
    top: calc(-178vw / 375 * 100);
  }
  .hint .hint-contents-img {
    top: calc(101vw / 375 * 100);
    width: 83%;
  }
}
/* case */
.case {
  padding: 0 0 40px;
}

.case .case-head img {
  width: fit-content;
  margin: 0 auto;
}
.case-head {
  margin-top: 100px;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: bold;
  color: #343b86;
  text-align: center;
}

.case-box-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.case-box-list::after {
  content: "";
  display: block;
  width: 255px;
}

.case-box {
  background-color: #f5f5f5;
  width: 286px;
  margin-top: 50px;
  border-radius: 5px;
  cursor: pointer;
}

.case-box-img img {
  border-radius: 5px 5px 0 0;
}

.case-box-txt-area {
  width: 255px;
  height: 200px;
  margin: 15px auto 0;
}

.case-box-txt {
  font-size: 16px;
  font-weight: bold;
}

.case-box-name {
  margin-top: 12px;
}

.case-box-category {
  display: inline-block;
  background-color: #f19149;
  margin-top: 10px;
  padding: 0 15px;
  font-size: 14px;
  color: #fff;
  border-radius: 50px;
}

@media (max-width: 1100px) {
  .case-head {
    margin-top: calc(50vw / 1100 * 100);
  }
  .case-sub-head {
    margin-top: calc(50vw / 1100 * 100);
    padding: calc(15vw / 1100 * 100) 0;
    font-size: calc(24vw / 1100 * 100);
    border-bottom: calc(2vw / 1100 * 100) solid #dcdcdc;
  }

  .case-box-list::after {
    width: calc(255vw / 1100 * 100);
  }

  .case-box {
    width: calc(286vw / 1100 * 100);
    margin-top: calc(50vw / 1100 * 100);
    border-radius: calc(5vw / 1100 * 100);
  }

  .case-box-img img {
    border-radius: calc(5vw / 1100 * 100) calc(5vw / 1100 * 100) 0 0;
  }

  .case-box-txt-area {
    width: calc(255vw / 1100 * 100);
    height: calc(200vw / 1100 * 100);
    margin: calc(15vw / 1100 * 100) auto 0;
  }

  .case-box-txt {
    font-size: calc(16vw / 1100 * 100);
  }

  .case-box-name {
    margin-top: calc(12vw / 1100 * 100);
  }

  .case-box-category {
    margin-top: calc(10vw / 1100 * 100);
    padding: 0 calc(15vw / 1100 * 100);
    font-size: calc(14vw / 1100 * 100);
    border-radius: calc(50vw / 1100 * 100);
  }
}
@media (min-width: 900px) and (max-width: 950px) {
  .case-head.common-sec-head {
    margin-top: calc(100vw / 900 * 100);
  }
}

@media (max-width: 750px) {
  .case {
    padding: calc(20vw / 750 * 100) 0 calc(60vw / 750 * 100);
    margin-top: calc(70vw / 750 * 100);
  }

  .case-sub-head {
    margin-top: calc(60vw / 750 * 100);
    padding: calc(15vw / 750 * 100) 0;
    font-size: calc(37vw / 750 * 100);
    border-bottom: calc(2vw / 750 * 100) solid #dcdcdc;
    text-align: center;
  }

  .case-box-list::after {
    width: calc(255vw / 750 * 100);
  }

  .case-box {
    width: calc(315vw / 750 * 100);
    margin-top: calc(40vw / 750 * 100);
    border-radius: calc(5vw / 750 * 100);
  }

  .case-box-img img {
    border-radius: calc(5vw / 750 * 100) calc(5vw / 750 * 100) 0 0;
  }

  .case-box-txt-area {
    width: calc(275vw / 750 * 100);
    height: auto;
    margin: calc(15vw / 750 * 100) auto calc(50vw / 750 * 100);
  }

  .case-box-txt {
    font-size: calc(28vw / 750 * 100);
    line-height: 1.6;
  }

  .case-box-name {
    margin-top: calc(30vw / 750 * 100);
    font-size: calc(22vw / 750 * 100);
  }

  .case-box-category {
    margin-top: calc(10vw / 750 * 100);
    padding: 0 calc(15vw / 750 * 100);
    font-size: calc(16vw / 750 * 100);
    border-radius: calc(50vw / 750 * 100);
  }
  .case .case-head.common-sec-head {
    font-size: calc(42vw / 750 * 100);
  }
}

/*202409改修*/

/*ボタン*/
.btn-effects {
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}

.btn-effects a {
  transition: all 0.3s;
}

.fv-btn {
  position: relative;
  margin: 0 auto 20px;
  background-color: #e8440b;
  width: 441px;
  height: 72px;
  border: 2px solid #e8440b;
  border-radius: 10px;
  z-index: 2;
}
.fv-btn:hover {
  background-color: #fff;
}

.fv-btn-inner,
.hint.cta .fv-btn-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-right: 20px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.fv-btn-inner:hover {
  color: #e8440b;
}

.fv-btn-inner::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  display: block;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transition: all 0.3s;
  transform: rotate(45deg);
}
.fv-btn-inner:hover:after {
  top: 25px;
  border-bottom: 2px solid #e8440b;
  border-right: 2px solid #e8440b;
  transform: rotate(45deg);
}

.hint.cta {
  position: relative;
  margin: -100px auto 0;
  background-color: #fff8f3;
  padding-bottom: 80px;
}

.hint.cta .hint-contents-area {
  padding: 54px 0;
  background-color: #ed582d;
  margin: 0 auto;
}

.hint.cta .fv-btn {
  margin: 120px auto 20px;
  background-color: #343b86;
  width: 441px;
  height: 72px;
  border: 2px solid #343b86;
  border-radius: 10px;
}

.hint.cta .fv-btn-inner:hover {
  color: #343b86;
}

.hint.cta .fv-btn-inner:hover:after {
  top: 25px;
  border-bottom: 2px solid #343b86;
  border-right: 2px solid #343b86;
  transform: rotate(45deg);
}

@media (max-width: 1100px) {
  .fv-btn {
    margin: calc(20vw / 1100 * 100) auto calc(20vw / 1100 * 100);
    width: calc(441vw / 1100 * 100);
    height: calc(72vw / 1100 * 100);
    border: calc(2vw / 1100 * 100) solid #e8440b;
    border-radius: calc(10vw / 1100 * 100);
  }
  .fv-btn-inner {
    padding-right: calc(20vw / 1100 * 100);
    font-size: calc(20vw / 1100 * 100);
  }

  .fv-btn-inner::after {
    top: calc(20vw / 1100 * 100);
    right: calc(20vw / 1100 * 100);
    width: calc(20vw / 1100 * 100);
    height: calc(20vw / 1100 * 100);
    border-bottom: calc(2vw / 1100 * 100) solid #fff;
    border-right: calc(2vw / 1100 * 100) solid #fff;
  }

  .fv-btn-inner:hover:after {
    top: calc(25vw / 1100 * 100);
    border-bottom: calc(2vw / 1100 * 100) solid #e8440b;
    border-right: calc(2vw / 1100 * 100) solid #e8440b;
  }

  .hint.cta {
    margin-top: calc(-100vw / 1100 * 100);
    padding-bottom: calc(60vw / 1100 * 100);
  }

  .hint.cta .hint-contents-area {
    padding: calc(54vw / 1100 * 100) 0;
  }

  .hint.cta .fv-btn {
    margin: calc(120vw / 1100 * 100) auto calc(20vw / 1100 * 100);
    width: calc(441vw / 1100 * 100);
    height: calc(72vw / 1100 * 100);
    border: calc(2vw / 1100 * 100) solid #343b86;
    border-radius: calc(10vw / 1100 * 100);
  }
  .hint.cta .fv-btn-inner:hover:after {
    border-bottom: calc(2vw / 1100 * 100) solid #343b86;
    border-right: calc(2vw / 1100 * 100) solid #343b86;
  }
}

@media (min-width: 750px) and (max-width: 950px) {
  .hint.cta {
    margin-top: calc(-80vw / 900 * 100);
    padding-bottom: calc(80vw / 900 * 100);
  }

  .hint.cta .hint-contents-area {
    padding: calc(54vw / 900 * 100) 0;
  }
}

@media (max-width: 750px) {
  .fv-btn {
    margin: calc(60vw / 750 * 100) auto calc(20vw / 750 * 100);
    width: calc(441vw / 750 * 100);
    height: calc(72vw / 750 * 100);
    border: calc(2vw / 750 * 100) solid #e8440b;
    border-radius: calc(10vw / 750 * 100);
  }
  .fv-btn-inner {
    padding-right: calc(20vw / 750 * 100);
    font-size: calc(20vw / 750 * 100);
  }

  .fv-btn-inner::after {
    top: calc(20vw / 750 * 100);
    right: calc(20vw / 750 * 100);
    width: calc(20vw / 750 * 100);
    height: calc(20vw / 750 * 100);
    border-bottom: calc(2vw / 750 * 100) solid #fff;
    border-right: calc(2vw / 750 * 100) solid #fff;
  }

  .fv-btn-inner:hover:after {
    top: calc(25vw / 750 * 100);
    border-bottom: calc(2vw / 750 * 100) solid #e8440b;
    border-right: calc(2vw / 750 * 100) solid #e8440b;
  }

  .hint.cta {
    margin-top: calc(-80vw / 750 * 100);
    padding-bottom: calc(80vw / 750 * 100);
  }

  .hint.cta .hint-contents-area {
    padding: calc(54vw / 750 * 100) 0;
  }

  .hint.cta .fv-btn {
    margin: calc(120vw / 750 * 100) auto calc(20vw / 750 * 100);
    width: calc(441vw / 750 * 100);
    height: calc(72vw / 750 * 100);
    border: calc(2vw / 750 * 100) solid #343b86;
    border-radius: calc(10vw / 750 * 100);
  }
  .hint.cta .fv-btn-inner:hover:after {
    border-bottom: calc(2vw / 750 * 100) solid #343b86;
    border-right: calc(2vw / 750 * 100) solid #343b86;
  }
}

@media (max-width: 450px) {
  .fv-btn {
    margin: calc(60vw / 450 * 100) auto calc(20vw / 450 * 100);
    width: calc(411vw / 450 * 100);
    height: calc(72vw / 450 * 100);
    border: calc(2vw / 450 * 100) solid #e8440b;
    border-radius: calc(10vw / 450 * 100);
  }
  .fv-btn-inner {
    padding-right: calc(20vw / 450 * 100);
    font-size: calc(20vw / 450 * 100);
  }

  .fv-btn-inner::after {
    top: calc(20vw / 450 * 100);
    right: calc(20vw / 450 * 100);
    width: calc(20vw / 450 * 100);
    height: calc(20vw / 450 * 100);
    border-bottom: calc(2vw / 450 * 100) solid #fff;
    border-right: calc(2vw / 450 * 100) solid #fff;
  }

  .fv-btn-inner:hover:after {
    top: calc(25vw / 450 * 100);
    border-bottom: calc(2vw / 450 * 100) solid #e8440b;
    border-right: calc(2vw / 450 * 100) solid #e8440b;
  }

  .hint.cta {
    margin-top: calc(-60vw / 450 * 100);
    padding-bottom: calc(80vw / 450 * 100);
  }

  .hint.cta .hint-contents-area {
    padding: calc(54vw / 450 * 100) 0;
  }

  .hint.cta .fv-btn {
    margin: calc(60vw / 450 * 100) auto calc(20vw / 450 * 100);
    width: calc(411vw / 450 * 100);
    height: calc(72vw / 450 * 100);
    border: calc(2vw / 450 * 100) solid #343b86;
    border-radius: calc(10vw / 450 * 100);
  }
  .hint.cta .fv-btn-inner:hover:after {
    border-bottom: calc(2vw / 450 * 100) solid #343b86;
    border-right: calc(2vw / 450 * 100) solid #343b86;
  }
}

@media (max-width: 375px) {
  .fv-btn {
    margin: calc(80vw / 375 * 100) auto calc(20vw / 375 * 100);
    width: calc(360vw / 375 * 100);
    height: calc(60vw / 375 * 100);
    border: calc(2vw / 375 * 100) solid #e8440b;
    border-radius: calc(10vw / 375 * 100);
  }
  .fv-btn-inner {
    padding-right: calc(18vw / 375 * 100);
    font-size: calc(18vw / 375 * 100);
  }

  .fv-btn-inner::after {
    top: calc(18vw / 375 * 100);
    right: calc(18vw / 375 * 100);
    width: calc(18vw / 375 * 100);
    height: calc(18vw / 375 * 100);
    border-bottom: calc(2vw / 375 * 100) solid #fff;
    border-right: calc(2vw / 375 * 100) solid #fff;
  }

  .fv-btn-inner:hover:after {
    top: calc(22vw / 375 * 100);
    border-bottom: calc(2vw / 375 * 100) solid #e8440b;
    border-right: calc(2vw / 375 * 100) solid #e8440b;
  }

  .hint.cta {
    margin-top: calc(-60vw / 375 * 100);
    padding-bottom: calc(80vw / 375 * 100);
  }
  .hint.cta .hint-contents-area {
    padding: calc(54vw / 375 * 100) 0;
  }

  .hint.cta .fv-btn {
    margin: calc(80vw / 375 * 100) auto calc(20vw / 375 * 100);
    width: calc(360vw / 375 * 100);
    height: calc(60vw / 375 * 100);
    border: calc(2vw / 375 * 100) solid #343b86;
    border-radius: calc(10vw / 375 * 100);
  }
  .hint.cta .fv-btn-inner:hover:after {
    border-bottom: calc(2vw / 375 * 100) solid #343b86;
    border-right: calc(2vw / 375 * 100) solid #343b86;
  }
}