@charset "utf-8";

html {
    font-size: 62.5%;
    font-family: 'Noto Sans JP', sans-serif;
}

:after,:before {
  overflow: hidden;
}

:root {
    --color-accent: #F2FF00;
    --color-primary: #EA5521;
    --color-text:#333333;
  }

.bg-light {
    background-color: #FEF6F4;
}

.bg-gray {
  background-color: #f8f8f8;
}

section {
  padding-top: 50px;
  padding-bottom: 50px;
}

.inner {
  max-width: 1120px;
  margin: 0 auto;
}

.heading  {
  margin-bottom: 32px;
  font-size: 4.2rem;
  letter-spacing: 0.1rem;
  text-align: center;
  line-height: 1.6;
}

.heading-logo {
    width: 227px;
    margin-right: 10px;
    vertical-align: sub;
  }

p {
    font-size: 1.6rem;
}

.fs-xl {
    font-size: 5.4rem;
}

.fs-lg {
    font-size: 3.5rem;
}

.fs-md {
  font-size: 2.5rem;
}

.fs-sm {
  font-size: 2rem;
}

.fs-extra {
  font-size: 4.2rem;
}

.fw-bold {
  font-weight: 700;
}

.text-num {
  font-size: 1.4em;
}

.c-accent {
  color: var( --color-accent );
}

.c-primary {
  color: var(--color-primary);
}

.marker {
  padding-left: 8px;
  padding-right: 8px;
  margin-right: 5px;
  background-color: rgba(254, 216, 1, 0.25);
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

/* btn */
.btn-primary  {
  background-color: var(--color-primary);
  color: #fff;
  cursor: pointer;
  border-radius: 60px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.btn-primary:hover {
  opacity: 0.7;
  transition: all .3s;
}

.dl-btn {
  background-color: #FEA800;
  line-height: 1.2;
}

.btn-primary.-red {
  background-color: var(--color-accent);
}

.btn-primary.-yellow {
  background-color: #FEA800;
}

/* cta */
.cta {
  background-color: var(--color-primary);
}

.cta-ttl {
  font-size: 3.2rem;
  text-align: center;
  position: relative;
  z-index: 100;
  color: #fff;
}

.cta h3 {
  color: #fff;
}

.cta .bg-white {
  background-color: #fff;
  padding-right: 5px;
  padding-left: 5px;
}

.solve::after {
  content: '';
  position: absolute;
  top: 70px;
  left: 680px;
  width: 150px;
  height: 80px;
  background: url(../images/solution-deco.svg) center center no-repeat;
  background-size: contain;
  z-index: -1;
}

.cta h3 {
  font-size: 2.8rem;
  text-align: center;
}

.cta-btn {
  margin-top: 35px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.cta-btn .btn-primary {
  width:460px;
  height: 115px;
  font-size: 3.2rem;
  padding:25px 50px 25px 10px;
  border: 2px solid #fff;
}

.micro-copy {
  display: block;
}

.dl-btn{
  position: relative;
}

.dl-btn:before {
  content: '';
  position: absolute;
  top: calc(50px - 20px);
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(../images/dl-icon.svg) center center no-repeat;
  background-size: contain;
}

.trial-btn {
  position: relative;
  background-color: #fff;
  color: var(--color-primary);
  border-color: #FED801!important;
}

.trial-btn:before {
  content: '';
  position: absolute;
  top: calc(50px - 20px);
  right: 15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(../images/trial-icon.svg) center center no-repeat;
  background-size: contain;
}

.cta02 {
  margin-top: 50px;
  position: relative;
}

.cta02:before {
  content:'';
  position:absolute;
  top: -80px;
  left: 250px;
  width:283px;
  height:194px;
  background: url(../images/cta02-img.png) center center no-repeat;
  background-size: contain;

}

.cta-tag {
  display: block;
  width: 500px;
  margin: 0 auto;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 20px;
  background-color: #FEA800;
  color: #fff;
  position: absolute;
  top: -85px;
  left: calc(50% - 250px);
}




/* header */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 75px;
  
}

.header-cta .btn-primary{
  display: inline-block;
  width: 220px;
  height: 50px;
  border-radius: 30px;
  border: 2px solid #fff;
  font-size: 1.6rem;
  line-height: 45px;
  color: #fff;
  text-align: center;
}

.header-nav-pc {
  background-color:#FED801;
}

.nav-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}

.nav-item {
  font-size: 1.6rem;
}

/* main */

/* mv */

.mv {
  margin-top: 115px;
  display: flex;
  justify-content: space-between;
  padding-top:0;
  padding-bottom: 0;
  background-color: var(--color-primary);
}

.mv-left {
  width: 80%;
  padding: 40px;
}

.mv-left img {
  width: 85%;
  margin: 0 auto;
}

.mv-right {
  width: 35%;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color:#ffe299;
}


.form {
  padding: 30px 50px;
}

.form__head {
  margin-left: -15px;
  font-size: 3rem;
  text-align: center;
  position: relative;
}

.form__head:after {
  content: '';
  position: absolute;
  top: -30px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: url(../images/mv-document-icon.svg) center center no-repeat;
  background-size: contain;
}

.form__block {
  margin-top:20px;
}

.form__tr {
  margin-bottom: 10px;
}

.form__label {
  margin-bottom: 5px;
  padding-left: 15px;
  font-size: 1.6rem;
  position: relative;
}

.form__label span {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-primary);
  font-size: 2rem;
}

.form__tr input {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  width: 100%;
  height: 45px;
  font-size: 1.8rem;
}

.form__submit .btn-primary {
  margin-top: 20px;
  width: 100%;
  height: 56px;
  text-align: center;
  border: 2px solid #fff;
  font-size: 1.8rem;
  letter-spacing: 0.5em;
  background-color: #FEBF01;
}

/* about */

#about {
  margin-bottom: 50px;
}
#about .heading {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}
  


/* feature */
#feature {
  position: relative;
}

#feature .heading {
  width: 40%;
  margin: 0 auto;
  font-size: 3.7rem;
  color: #fff;
  background-color: var(--color-primary);
  border-radius: 8px;
  position: absolute;
  top: -50px;
  left: calc(50% - 295px);
}

#feature .heading:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  border-top: 20px solid var(--color-primary);
  border-bottom: 0;
}

.feature-list {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  margin-top: 50px;
}

.feature-item {
  padding:20px 15px;
  width: calc(33.33% - 24px);
  position: relative;
}

.feature-num {
  position: absolute;
  top: -30px;
  left: -30px;
  font-size: 3rem;
  line-height: 70px;
  color: #fff;
  background-color:var(--color-primary);
  border-radius: 50%;
  width: 70px;
  height: 70px;

}

.feature-item img {
  object-fit: cover;
}

.feature-item__txt {
  font-size: 3.7rem;
  line-height: 1.3;
}

/* subsidy */
#subsidy {
  margin-top: 50px;
}

#subsidy .heading {
  position: relative;
}

#subsidy .heading:before {
  content: '';
  position: absolute;
  top: -70px;
  left: 120px;
  width: 460px;
  height: 120px;
  background: url(../images/subsidy-tag.png) center center no-repeat;
  background-size: contain;
}

.subsidy-point-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 832px;
  margin: 0 auto;
  gap: 15px;
}

.subsidy-content-left {
  margin-bottom: 35px;
}

.subsidy-point-item {
  padding: 10px 17px 10px 37px;
  background-color: rgba(254, 216, 1, 0.07);
  border-radius: 8px;
  font-size:2rem;
  position: relative;
}

.subsidy-point-item:before {
  content: '';
  position: absolute;
  top: 22px;
  left: 10px;
  width: 22px;
  height: 22px;
  background-image: url(../images/subsidy-list-icon.svg);
  background-repeat: no-repeat;
}

#subsidy .text-num {
  font-size:3rem;
  line-height: 1;
}

.note {
  color:#333;
  font-size: 1.6rem;
  line-height: 1.6;
}

.subsidy-content-right {
  width:70%;
  margin: 0 auto 35px;
}

.notice {
  width: 90%;
  margin: 0 auto 50px;
  padding: 30px 70px;
  background-color: rgba(254, 216, 1, 0.15);
  border-radius: 15px;
}

.notice-ttl {
  font-size: 3.2rem;
  text-align: center;
}


.notice-date {
  width: 50%;
  margin: 0 auto 30px;
  text-align: center;
  font-size: 3rem;
  border-bottom: 2px solid var(--color-primary);
}

.notice-date .deadline {
  padding-right: 10px;
}

.notice-wrapper  {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.notice-box {
  width: calc(50% - 45px);
  padding: 15px 60px;
  background-color: #fff;
  border-radius: 15px;
  position: relative;
}

.notice-box p {
  text-align: center;
}

.notice-box p:first-child {
  padding-left: 20px;
}

.notice-box:first-child::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 80px;
  width: 45px;
  height: 45px;
  background-image: url(../images/document-not.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.notice-box:last-child::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 85px;
  width: 45px;
  height: 45px;
  background-image: url(../images/document.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.notice-box:first-child::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 80px;
  width: 45px;
  height: 45px;
  background-image: url(../images/document-not.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.notice-box:first-child p::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left:65px;
  width: 130px;
  height: 10px;
  background-image: url(../images/underline-wave.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.notice-box:last-child p::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 59px;
  width: 150px;
  height: 10px;
  background-image: url(../images/underline-wave.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.subsidy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 588px;
  height:90px;
  margin: 0 auto;
  color: #fff;
  background-color: #333;
  border-radius: 50px;
  font-size: 3.2rem;
  position: relative;
}

.subsidy-btn:after {
  content: '';
  position: absolute;
  top: calc(50% - 10px);
  right: 20px;
  width: 26px;
  height: 32px;
  background-image: url(../images/arrow-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.subsidy-btn:hover {
  opacity: 0.7;
  transition: all .3s;
}

/* problem */
#problem .heading {
  position: relative;
}

#problem .heading:after {
  content: '';
  position: absolute;
  top: -15px;
  left: 525px;
  width: 50px;
  height: 50px;
  background-image: url(../images/probrem-deco.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.problem-box {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  padding: 25px;
  background-color: #fff;
  border-radius: 15px;
}

.problem-l {
  width: 10%;
}

.problem-r {
  width: 85%;
}

.problem-ttl {
  font-size: 2.2rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.problem-item {
  margin-bottom: 10px;
  padding-left:20px;
  font-size: 1.6rem;
  line-height: 1.5;
  position: relative;
}

.problem-item:before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: #FEA800;
  border-radius: 50%;
  background-size: contain;
}

.underline {
    background: linear-gradient(transparent 60%, rgba(254, 216, 1, 0.27) 40%);
}

/* reason */

.reason-block {
  max-width:995px;
  margin:0 auto 15px;
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 20px;
}

.reason-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.reason-ttl {
  font-size: 2.8rem;
}

.reason-btm {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reason-before {
  width: 38%;
  padding: 10px 16px;
  background-color: rgba(217, 217, 217, 0.2);
  border-radius: 13px;
}

.reason-before span,.reason-after span {
  font-size: 2.2rem;
}

.reason-before p, .reason-after p {
  margin-top: 5px;
  font-size: 1.8rem;
  font-feature-settings: "palt";
}

.reason-after {
  width: 58%;
  padding: 20px 16px;
  background-color: rgba(254, 216, 1, 0.07);
  border-radius: 13px;
  position: relative;
}

.reason-after span {
  color: #EA5521;
}

.reason-after-ttl {
  font-size: 2.4rem;
  font-weight: 500;
  color: #EA5521;
}

.reason-after:before {
  content: '';
  position:absolute;
  top: 60px;
  left: -15px;
  margin-left: -15px;
   width: 0;
  height: 0;
  border-style: solid;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 21px solid #ea5521;
  border-right: 0;
}

.after1:after {
  content: '';
  position: absolute;
  top: -50px;
  right: 10px;
  width: 100px;
  height: 100px;
  background: url(../images/reason01.png) center center no-repeat;
  background-size: contain;
}

.after2:after {
  content: '';
  position: absolute;
  top: -50px;
  right: 10px;
  width: 100px;
  height: 100px;
  background: url(../images/reason02.png) center center no-repeat;
  background-size: contain;
}

.after3:after {
  content: '';
  position: absolute;
  top: -50px;
  right: 10px;
  width: 100px;
  height: 100px;
  background: url(../images/reason03.png) center center no-repeat;
  background-size: contain;
}

.after4:after {
  content: '';
  position: absolute;
  top: -50px;
  right: 10px;
  width: 100px;
  height: 100px;
  background: url(../images/reason04.png) center center no-repeat;
  background-size: contain;
}

.after5:after {
  content: '';
  position: absolute;
  top: -50px;
  right: 10px;
  width: 100px;
  height: 100px;
  background: url(../images/reason05.png) center center no-repeat;
  background-size: contain;
}

/* cta02 */
.cta02 .heading-logo {
  padding-left: 5px;
}

/* compare */
#compare.heading {
  position: relative;
}

#compare.heading:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0px;
  display: inline-block;
  width: 400px;
  height: 1px;
  background-color: var(--color-primary);
}

.compare__body {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}
.compare__wrapper {
  position: relative;
  overflow-x: auto;
}
.compare-table {
  min-width: 866px;
}
.compare-table-scroll__icon {
  border-radius: 8px 0 0 8px;
  width: 64px;
  height: 64px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: -webkit-calc(100% - 64px + 15px);
  left: calc(100% - 64px + 15px);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.compare-table__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}
.compare-table__row:first-of-type .compare-table__col {
  padding-top: 16px;
  padding-bottom: 8px;
}
.compare-table__row:first-of-type .compare-table__col:nth-of-type(2) {
  border-radius: 16px 16px 0 0;
}
.compare-table__row:first-of-type .compare-table__col:nth-of-type(2) .compare-table__inner {
  border: none;
}
.compare-table__row:last-of-type .compare-table__col {
  padding-bottom: 24px;
}
.compare-table__row:last-of-type .compare-table__col:nth-of-type(2) {
  border-radius: 0 0 16px 16px;
}
.compare-table__row:last-of-type .compare-table__content {
  padding-bottom: 0;
}
.compare-table__col:nth-of-type(1) {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 10.8545034642%;
  flex: 0 0 10.8545034642%;
}
@media only screen and (min-width: 768px) {
  .compare-table__col:nth-of-type(1) {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 17.8723404255%;
    flex: 0 0 17.8723404255%;
  }
}
.compare-table__col:nth-of-type(1) .compare-table__content {
  text-align: start;
}
.compare-table__col:nth-of-type(1) .compare-table__box {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.compare-table__col:nth-of-type(2) {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 27.7136258661%;
  flex: 0 0 27.7136258661%;
  background-color: var(--color-primary);
  padding: 0 12px;
  position: relative;
}
.compare-table__col:nth-of-type(2)::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    bottom: -1px;
    left: 0;
}
.compare-table__row:last-of-type .compare-table__col:nth-of-type(2)::after {
  display: none;
}
@media only screen and (min-width: 768px) {
  .compare-table__col:nth-of-type(2) {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25.5319148936%;
    flex: 0 0 25.5319148936%;
  }
}
.compare-table__col:nth-of-type(2) .compare-table__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.compare-table__col:nth-of-type(2) .compare-table__content .compare-table__box .compare-table__text {
  color: #333333;
}
.compare-table__col:nth-of-type(2) .compare-table__content .compare-table__text {
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
}
.compare-table__col:nth-of-type(2) .compare-table__content .compare-table__subtext {
  color: #FFFFFF;
  font-size: 1.4rem;
  line-height: 1.6rem;
}
.compare-table__col:nth-of-type(2) .compare-table-list__item {
  color: #FFFFFF;
}
.compare-table__col:nth-of-type(3), .compare-table__col:nth-of-type(4), .compare-table__col:nth-of-type(5) {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 18.0138568129%;
  flex: 0 0 18.0138568129%;
}
@media only screen and (min-width: 768px) {
  .compare-table__col:nth-of-type(3), .compare-table__col:nth-of-type(4), .compare-table__col:nth-of-type(5) {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.5957446809%;
    flex: 0 0 16.5957446809%;
  }
}
.compare-table__col:nth-of-type(3) .compare-table__content, .compare-table__col:nth-of-type(4) .compare-table__content, .compare-table__col:nth-of-type(5) .compare-table__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.compare-table__col:nth-of-type(3) .compare-table__content--start, .compare-table__col:nth-of-type(4) .compare-table__content--start, .compare-table__col:nth-of-type(5) .compare-table__content--start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.compare-table__inner {
  background-color: #FFFFFF;
  text-align: center;
  min-height: 56px;
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid var(--color-primary);
}
.compare-table__inner-opt {
  font-size: 1.2rem;
  font-weight: 500;
}
.compare-table__ttl {
  font-size: 1.6rem;
  font-weight: 500;
}
.compare-table__left-ttl {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .compare-table__left-ttl {
    text-align: start;
    font-size: 1.6rem;
  }
}
.compare-table__icon {
  text-align: center;
}

.compare-table__box {
  min-height: 56px;
  height: 100%;
  background-color: #F8F8F8;
  width: 100%;
  padding: 8px 12px;
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .compare-table__box {
    padding: 16px 12px;
  }
}
.compare-table__text {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
}
.compare-table__subtext {
  font-size: 1.2rem;
}
.compare-table__content {
  padding: 8px 0;
  text-align: center;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.compare-table__content--start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
@media only screen and (min-width: 768px) {
  .compare-table__content:not(:has(.compare-table__box)) {
    padding: 8px;
  }
}
.compare-table__points {
  padding-inline: 6px;
  text-align: start;
}
.compare-table-list__item {
  text-align: start;
  color: #333333;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8285714286;
  position: relative;
}
.compare-table-list.-listred li {
  padding-left: 15px;
}
.compare-table-list.-listred .compare-table-list__item:before {
  content: '・';
  position: absolute;
  left: 0;
  color: #333;
  padding-left: 0px;
}

/* function */
#function .inner {
  width: 1000px;
  margin:0 auto;
}

.function-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:15px;
}

.function-item {
  padding: 5px;
  width: calc(50% - 15px);
  height:100px;
  background-color: #F8F8F8;
  display: flex;
  justify-content: start;
  align-items: center;
  gap:10px;
  border-radius: 10px;
}

.function-ttl {
  font-size: 2rem;
  font-weight: 500;
}

/* price */
#price .inner {
  width: 940px;
  margin: 0 auto;
}

.price-txt {
  text-align: center;
  font-size: 2rem;
}

.price-wrapper {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 40px;
}

.price-box {
  width: calc(50% - 20px);
  padding: 0px;
  border: 3px solid #FEA800 ;
  border-radius: 26px;
}

.price-box.-red {
  border-color: #EA5521;
}

.price-head {
  margin-bottom: 10px;
}

.price-head p {
  margin-bottom: 15px;
  background-color: #FEA800;
  padding-top: 15px;
  padding-bottom: 15px;
  color: #fff;
  text-align: center;
  font-size: 2rem;
  border-radius: 20px 20px 0 0;
}

.price-head.-red p {
  background-color: #EA5521;
}

.price-head h3 {
  color:#FEA800;
}

.price-head.-red h3 {
  color:var(--color-primary);
}

.price-ttl {
  padding-bottom: 15px;
  font-size: 2.8rem;
  font-weight: 600;
  text-align: center;
}


.price-top {
  margin: 0 20px;
  padding: 15px 18px;
  align-items: center;
  border-bottom: 1px solid #9a9a9a;
  border-top: 1px solid #9a9a9a;
}

.price-box:last-child .price-top {
  justify-content: center;
  gap: 20px;
}

.price-top-l, .price-top-r, .price-col-l, .price-col-r {
  font-size: 1.8rem;
  font-weight: 600;
}

.price-top-l {
  padding-top: 10px;
}

.price-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20px;
  padding:15px 18px;
  border-bottom: 1px solid #9a9a9a;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}

.price-bottom {
  margin: 0 20px;
  padding: 15px 18px;
}

.price-bottom-ttl {
  font-size: 1.8rem;
  font-weight: 600;
}

.price-group {
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}

.price-group-item {
  padding: 7px 11px 7px 27px;
  background-color: rgba(254, 216, 1, 0.14);
  border-radius: 50vh;
  font-size: 1.6rem;
  position: relative;
}

.price-group-item:before {
  content:'';
  position:absolute;
  top:11px;
  left:9px;
  width: 16px;
  height:16px;
  background-color: #ea5521;
  border-radius: 50vh;
}

.price-note {
  margin: 0 20px;
  padding: 0 15px 18px;
}

.price-note li {
  font-size: 1.6rem;
}

/* cta03 */
.cta03 {
  position: relative;
}

.cta03:after {
  content: '';
  position: absolute;
  top: 0;
  right: 330px;
  width: 216px;
  height: 180px;
  background: url(../images/cta03-img.png) center center no-repeat;
  background-size: contain;
}


.emphasis {

  position: relative;
}

.emphasis::before {
  content: '';
  position: absolute;
  top: 0;
  left: 9px;
  width: 116px;
  height: 10px;
  background: url(../images/empasis.svg) center center no-repeat;
  background-size: contain;
}

/* case */
/* logo */
.logo-slider {
  margin-bottom: 30px;
}
.logo-slider {
  overflow: hidden;
  white-space: nowrap;
}

.logo-track {
  display: flex;
  animation: scroll 30s linear infinite;
}

.logo-track img {
  height: 50px; /* ロゴの高さ調整 */
  margin-right: 20px; /* ロゴ間の余白 */
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* コンテンツ幅の半分ずつ動かす */
}

/* case-study */
#case {
  overflow: hidden;
}
.swiper {
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: auto;
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.swiper-slide {
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  font-size: 24px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  height: 380px;
}

.case-container {
  /* overflow: hidden; */
  flex: 1;
}

.case-swiper {
  position: relative;
  overflow: visible;
}

.case-heading {
  color:#333;
  font-weight: 600;
}

.half-marker {
  background: linear-gradient(transparent 60%, rgba(254, 216, 1, 0.5) 40%);
}

.case-row {
  margin-top: 30px;
}

.case-swiper {
  position: relative;
}


.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 20px;
}

.swiper-button-next, .swiper-button-prev {
  color: #fff;
  background-color: #FEA800;
  padding: 8px;
  border-radius: 100px;
  width: 40px;
  height: 40px;
  position: absolute;
}

.swiper-button-prev {
   left: 25%; 
}
.swiper-button-next {
   right: 25%; 
}

.swiper-pagination-bullet-active  {
  background: var(--color-primary);
}

.swiper-pagination {
  bottom: -30px!important;
}

/* manga */
#manga {
  margin-top: 50px;
}

/* movie */

.videoWrapper {
  position: relative;
  width: 720px;  
  height: 432px;
  margin: 0 auto;
}

.videoWrapper iframe {
  width: 100%;
  height: 100%;
}

.videoThumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

.videoThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: #fff;
  width: 80px;
  height: 80px;
  border-radius: 50%; 
  border: 2px solid #fff;      
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

 .catch {
  position: relative;
  
}

.catch::before,
.catch::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;   /* 線の長さ */
  height: 3px;   /* 線の太さ */
  background: black;
}

.catch::before {
  right:155px;
  top: 80px;
  transform: rotate(114deg);
}

.catch::after {
  left: 155px;
  top: 80px;
  transform: rotate(-114deg);
}



/* footer */
#footer {
  margin-top: 100px;
  position: relative;
}

.scroll-top {
  position: absolute;
  top: -60px;
  right: 300px;
  display: none;
  cursor: pointer;
  z-index: 1000;
}

.footer-logo {
  text-align: center;
}

.company-info {
  margin-bottom: 50px;
}

.company-info-name {
  margin-bottom: 40px;
}

#footer .line {
  display: block;
  background-color: #C6C6C6;
  width: 100%;
  height: 1px;
}

.footer-nav {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 940px;
  margin: 0 auto;
}

.footer-nav-list {
  display: flex;
  justify-content: space-between;
  
}

.footer-list__item-link  {
  display: flex;
  font-size: 1.4rem;
  line-height: 20px;
  align-items: center;
  gap: 10px;
}

.copyright {
  background-color: #f8f8f8;
  padding-top: 5px;
  padding-bottom: 5px;
}

.copyright-txt {
  text-align: center;
  font-size: 1.4rem;
}

/* modal */

/* モーダルの背景 */
.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(30px); 
  justify-content: center;
  align-items: center;
}

/* モーダルの中身 */
.modal-content {
  background: #fff;
  padding: 20px;
  width: 80%;
  max-width: 500px;
  border-radius: 10px;
  position: relative;
  overflow-x: auto;
}

.modal h2 {
  text-align: center;
}

/* 閉じるボタン */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* ハンバーガーメニュー */

#hamburger img {
  width: 30px;
  height: auto;
  cursor: pointer;
}
#hamburger .close {
  display: none; /* 初期は非表示 */
}
#hamburger.active .open {
  display: none;
}
#hamburger.active .close {
  display: block;
}


/* 初期状態：右に隠す */
.sideMenu {
position: fixed;
top: 45px;
right: calc(-335px - 15%);
width: 100%;
height: calc(100vh - 95px);
background: rgba(0, 0, 0, 0.5);;
transition: right 0.3s ease;
z-index: 1000;
overflow-y: auto;
}

/* active時にスライド表示 */
.sideMenu.active {
right: 0;
width: 100%;
margin-left: 30px;
z-index: 4;
}

.sp-menu__item a {
    text-decoration: none;
    color: #000;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.25;
    display: inline-block;
    position: relative;
}

.sp-menu__item:not(:last-of-type) {
    margin-bottom: 20px;
}

.sp-menu__btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 7px;
}

.sp-menu__btns .btn-primary {
    max-width: 100%;
    cursor: pointer;
}

#sideMenu .btn-primary {
  height:40px;
  width: 50%;
  line-height: 40px;
  border: 2px solid #fff;
}

#sideMenu .dl-btn:before, #sideMenu  .trial-btn:before {
  display: none;
}

#sideMenu .dl-btn {
  background-color: var(--color-primary);
}

#sideMenu .trial-btn {
  background-color: #fea800;
  color:#fff;
}

.sp-menu__list {
  margin-top: 20px;
}

.sp-menu__btm {
  margin-top: 30px;
}

.sp-menu__company {
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.43;
    font-weight: 500;
    margin-top: 5px;
}
  .sp-menu__container {
    padding: 20px 40px;
    z-index: 2;
    max-width: 335px;
    width: 100%;
    background-color: #fff;
    margin-left: auto;
  }

  .sp-menu__item.link a::after {
    content: "";
    position: absolute;
    background-image: url(../images/ext_icon.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 18px;
    height: 18px;
    right: -28px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}



  
  /* レスポンシブ */
  @media screen and (max-width:750px) {
    .pc-only {
        display: none;
    }
    
      .sp-only {
        display: block;
    }

    
    /* 共通 */

    .inner {
      padding-left: 20px;
      padding-right: 20px;
      width: 100%;
    }

    .heading {
      font-size: 3rem;
      font-weight: 500;
    }

    .fs-xl {
      font-size: 4.5rem;
    }

    .fs-lg {
      font-size: 3rem;
    }

    .fs-md {
      font-size: 2.5rem;
    }

    .heading {
      line-height: 1;
    }

    /* header */
    header .header {
      height: 50px;
    }

    .header .logo {
      width: 172px;
    }
    /* mv */
    .mv {
      flex-direction: column;
      padding-bottom: 40px;
      margin-top:50px;
    }

    .mv-left {
      width: 100%;
      padding: 20px;
    }

    .mv-right {
      width: 90%;
      margin: 0 auto;
      border-radius: 10px;
    }

    .form  {
      padding: 20px;
    }

    .form__head {
      font-size: 2.5rem;
    }

    .form__head:after {
      right: -30px;
    }

    /* about */
    .about {
      width: 100%;
      margin: 0 auto;
    }

    /* feature */
    #feature .heading{
      line-height: 1.6;
      font-size: 3.2rem;
      left: 10px;
      width: 95%;
      margin: 0 auto;
    }

    .feature-list {
      flex-direction: column;
      margin-top: 0;
    }

    .feature-item {
      width: 100%;
      margin-bottom: 20px;
      gap: 20px;
    }

    /* subsidy */

    #subsidy {
      margin-top: 80px;
    }

    #subsidy .heading {
      line-height: 1.8;
    }

    #subsidy .heading:before {
      width: 332px;
      height: 120px;
      left: 0;
      top: -100px;
    }

    .subsidy-content {
      flex-direction: column;
      gap: 30px;
    }

    .subsidy-point-list {
      flex-direction: column;
      width: 100%;
    }

    .subsidy-point-item {
      font-size: 2rem;
    }

    .note {
      font-feature-settings: "palt";
    }

    .subsidy-content-left {
      order: 2;
    }

    .subsidy-content-right {
      order: 1;
    }

    .subsidy-content-left, .subsidy-content-right {
      width: 100%;
    }

    .notice {
      width: 100%;
      padding: 18px;
    }

    .notice-ttl {
      font-size: 2.4rem;
      font-feature-settings: "palt";
    }

    .notice-date {
      width: 100%;
      margin-top: 30px;
      border-bottom: none;
    }

    .deadline {
      display: block;
      background-color: #fff;
      border-radius: 100vh;
    }

    .notice-wrapper {
      flex-direction: column;
      gap: 20px;
    }

    .notice-box {
      width: 100%;
      padding: 15px;
    }

    .notice-box:first-child::before {
      top: 18px;
      left: 40px;
    }

    .notice-box:last-child::before {
      top: 18px;
      left: 55px;
    }

    .notice-box:first-child p::before {
      left: 22px;
      width: 130px;
    }

    .notice-box:last-child p::before {
      left: 22px;
      width: 130px;
    }

    .subsidy-btn {
      width: 100%;
      font-size: 2.2rem;
      text-align: center;
    }

    /* problem */
    #problem .fs-xl {
      font-size: 3.5rem;
    }

    #problem .heading {
      line-height: 1.4;
    }

    #problem .heading:after {
      left: 240px;
      top: -30px;
    }

    .problem-wrapper {
      width: 100%;
    }

    .problem-box {
      flex-direction: column;
      width:100%;
      padding: 15px;
      position: relative;
    }

    .problem-r {
      width: 100%;
    }

    .problem-ttl {
      font-size: 1.8rem;
      font-weight: 500;
      padding-left: 80px;
      margin-top: 10px;
      margin-bottom: 20px;
    }

    .problem-l {
      width: 18%;
      position: absolute;
      top: 15px;
      left: 20px;
    }

    .problem-item {
      margin-bottom: 15px;
      top: 3px;
      padding-left: 19px;
      font-feature-settings: "palt";
    }

    .problem-item:before {
      width: 15px;
      height: 15px;
      top: 4px;
    }

    .problem-list {
      border-top: 1px solid #333;
      padding-top: 20px;
    }

    .problem-box:last-child .problem-img {
      transform: scale(0.75);
    }

    /* cta01 */
    .cta01 {
      padding-top: 10px;
    }
    .cta-ttl {
      font-size: 2.4rem;
      font-weight: 500;
    }

    .solve::after {
      top: 150px;
      left: 140px;
    }

    .cta h3 {
      margin-top: 15px;
      font-size: 2rem;
      font-feature-settings: "palt";
    }

    .fs-extra {
      font-size: 3.6rem;
    }

    .heading-logo {
      margin-top: 3px;
    }

    .cta01 .fs-xl{
      font-size: 4.2rem;
    }

    .cta-btn {
      flex-direction: column;
    }

    .cta-btn .btn-primary{
      width: 100%;
      font-size: 2.4rem;
      height: auto;
    }

    .micro-copy {
      font-size: 1.6rem;
    }

    .dl-btn:before {
      width: 45px;
      height: 45px;
    }

    .trial-btn:before {
      width: 45px;
      height: 45px;
      right: 10px;
    }

    /* reason */
    #reason .heading-logo {
      margin-top: 3px;
      width: 170px;
      margin-right: 5px;
    }

    .fs-50 {
      font-size: 5rem;
    }

    .reason-wrapper {
      flex-direction: column;
      gap: 16px;
    }

    .reason-block {
      width: 100%;
    }

    .reason-num {
      font-size: 1.8rem;
      margin-bottom: 10px;
    }

    .reason-num span {
      font-size: 3.2rem;
    }

    .reason-block .reason-num:after {
      top: 60%;
      width: 220px;
    }

    .reason-row {
      gap: 10px;
    }

    .reason-col-left {
      order: 2;
    }

    .reason-col-right {
      order: 1;
      width: 75%;
      font-feature-settings: "palt";
    }

    .reason-ttl {
      font-size: 2.4rem;
      font-weight: 500;
      line-height: 1.3;
    }

    .reason-btm {
      flex-direction: column;
    }

    .reason-before  {
      width: 100%;
      margin-bottom: 40px;
    }

    .reason-after {
      width: 100%;
    }

    .reason-after:before  {
      top: -30px;
      left: 150px;
      border-top: 21px solid #ea5521;
      border-bottom: 0;
      border-right: 21px solid transparent;
      border-left: 21px solid transparent;;

    }

    .reason-top {
      gap: 12px;
    }

    #reason .fs-lg {
      font-size: 2.8rem;
    }

    .after1:after {
      top: -20px;
      right: 10px;
      width: 90px;
      height: 90px;
    }
    .after2:after {
      top: -30px;
      right: 10px;
      width: 90px;
      height: 90px;
    }
    .after3:after {
      top: -30px;
      right: 10px;
      width: 90px;
      height: 90px;
    }
    .after4:after {
      top: -30px;
      right: 10px;
      width: 90px;
      height: 90px;
    }
    .after5:after {
      top: -40px;
      right: 10px;
      width: 90px;
      height: 90px;
    }

    /* compare */
    .compare-table__row {
      gap: 5px;
    }

    /* cta02 */
    .cta-tag {
      width: 100%;
      left: 0;
    }

    .cta02:before {
      top: 650px;
      left: 7px;
      width: 150px;
      height: 135px;


    }

    .cta-ttl .c-primary {
      font-size: 3.6rem;
    }

    .cta02 h3 {
      font-weight: 500;
      font-size: 2.6rem;
    }


    /* function */
    #function {
      margin-top: 30px;
    }
    #function .inner {
      width: 100%;
    }
    .function-wrapper {
      gap: 8px;
    }

    .function-item {
      width: 100%;
      gap:8px;
      padding: 20px;
    }

    .function-item-r {
      width:30%;
    }

    .function-item img {
      width: 50px;
      height: auto;
    }

    .function-item p {
      line-height: 1.4;
    }

    /* price */
    #price .inner  {
      width: 100%;
    }

    .price-wrapper {
      flex-direction: column;
    }

    .price-box {
      width: 100%;
      padding: 0;
    }

    .price-head {
      text-align: center;
    }

    .price-top-l {
      padding-top: 0;
    }

    .price-group-item {
      font-size: 1.4rem;
    }

    .price-top,.price-middle,.price-bottom {
      margin: 0 10px;
      padding: 15px 5px;
    }


    /* cta03 */
    .cta03 {
      position: relative;
    }

    .cta03:after {
      content: '';
      position: absolute;
      top: -40px;
      right: 0;
      width: 186px;
      height: 150px;
      background: url(../images/cta03-img.png) center center no-repeat;
      background-size: contain;
    }

    .cta03 .cta-ttl {
      padding-top: 40px;
      position: relative;
      font-size: 3.2rem;
    }


    .cta03 .fs-lg {
      font-size: 2.2rem;
    }

    .emphasis::before {
      top: -4px;
      left: 7px;
      width: 73px;
    }

    .cta03 .heading-logo {
      margin-top: 15px;
      margin-left: 5px;
    }

    /* case */
    .swiper-button-prev {
      left: 2px;
    }

    .swiper-button-next {
      right: 2px;
    }

    .case-swiper {
      padding-left: 20px;
      padding-right: 20px;
    }

    .case-heading {
      font-size: 1.8rem;
    }

    .swiper-slide {
      padding:20px;
      height: auto;
    }

    /* manga */
    .manga-wrap {
      overflow: scroll;
    }

    .manga-card {
      width:180%;
    }

    /* movie */
    .youtube .fs-lg {
      font-size: 1.8rem;
    }

    .youtube .heading {
      line-height: 1.4;
      font-size: 2.6rem;
    }

    .videoWrapper {
      width: 100%;
      height: auto;
    }

    .catch {
  position: relative;
  
}

.catch::before,
.catch::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;   /* 線の長さ */
  height: 2px;   /* 線の太さ */
  background: black;
}

.catch::before {
  right:-15px;
  top: 50px;
  transform: rotate(114deg);
}

.catch::after {
  left: -15px;
  top: 50px;
  transform: rotate(-114deg);
}

    /* footer */

    .footer-nav {
      width: 100%;
      height: auto;
    }

    .footer-nav-list {
      flex-wrap: wrap;
      gap: 15px 40px;
      justify-content: flex-start;
    }

    .footer-nav-item:nth-child(1){
      order: 1;
    }

    .footer-nav-item:nth-child(2){
      order: 3;
    }

    .footer-nav-item:nth-child(3){
      order: 5;
    }

    .footer-nav-item:nth-child(4){
      order: 2;
    }

    .footer-nav-item:nth-child(5){
      order: 4;
    }

    .footer-nav-item:nth-child(6){
      order: 6;
    }

    .footer-list__item-link {
      gap: 5px;
    }

    .footer-nav {
      max-width: 345px;
    }

    .footer-nav .inner  {
      padding-right: 20px;
      padding-left: 20px;
    }

    .scroll-top {
      right: 30px;
    }

    #modal .heading {
      font-size: 2.5rem;
    }

    .modal-content {
      width: 90%;
      padding: 40px 20px;
    }

    

  



  }