@charset "utf-8";

.l-sec:has(.l-sec__cms-inner),
.l-sec--blue:has(.l-sec__cms-inner) {
    padding: 0;
}

.l-sec__inner:has(.l-sec__cms-inner) {
    padding: 0;
    max-width: revert;
}


.l-main {
  font-size:18px;
}

.c3-01__sec--text {
  width: 100%;
  color: #666;
  line-height: 1.875;
}

.c4-02__timeline--ttl {
  font-size: 1.25rem;
}
.c4-02__timeline--txt {
  font-size: 1rem;
}
.c4-02__timeline--period {
  margin-top: auto!important;
}

.hero-img {
  background-image: url("/solution/security-support/img/index_hero_pc.jpg");
}

.hero01 h1 .hero01__ttl--main {
  display: block;
  font-size:42px;
  margin-bottom: 1rem;
}

.hero01 h1 .hero01__ttl--catch {
  display: block;
  color: #666;
  font-size: 26px;
  line-height: 1.6;
}

.hero01 h1 .hero01__ttl--sub {
  font-size: 20px;
}

.c3--etc {
  padding-left: 300px;
}

.cta-01__contact--form-app a {
  width: 240px;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .c2-03__comparison {
      align-items: stretch;
  }
  .c3-01__sec--txt,
  .c3-01__sec--text {
    font-size: 20px;
  }
  .c4-02__timeline--period {
    font-size: .82rem;
  }
}
@media (max-width: 1079.9px) {
  .hero01 {
    background-position:left;
  }
  .c3--etc {
    padding-left: 0px;
  }
}
@media (max-width: 767px) {
  .temp-sec {
    font-size: 1rem;
  }
  .temp-sec__dsc {
    font-size: 1rem;
  }
  .c2-03__comparison--list li {
    font-size: 1rem;
  }
  .c3-01__sec--txt,
  .c3-01__sec--text {
    font-size: 1.125rem;
  }

  .hero01__inner {
    margin-top: 6%;
  }
  .hero01 h1 .hero01__ttl--main {
    font-size:min(28px,6.2vw);
  }
  .hero01 h1 .hero01__ttl--catch {
    font-size:min(22px,5.8vw);
  }
  .hero01 h1 .hero01__ttl--sub {
    font-size:min(16px,5.6vw);
  }

  .hero-img {
    display: block;
    background: url("/solution/security-support/img/index_hero_sp.jpg") center center / cover;
  }
  .hero01__link a {
    width: auto;
    font-size:min(14px,6vw);
    padding-left: 24px;
    padding-right: 24px;
  }
}

.c3-03__sec--list li.check::before {
  content: '✓';
  color: #22C55E;
}








.l-main {
  font-size: 16px;
  font-weight: 400;
}

.grad-orange-bg {
  background-image: linear-gradient( -90deg, rgb(254,184,0) 0%, rgb(255,151,2) 100%);
}


.modaal-content-container dl {
  display: grid;
  grid-template-columns: 9em 1fr;
}
.modaal-content-container dt {
  display: flex;
  justify-content: space-between;
}
.modaal-content-container dt::after {
  display: inline-block;
  content: '：';
}



/********************
      templates
 ********************/

/********************
  common
********************/

.temp-sec {
  background: #FFF;
}
.temp-sec__ttl {
  background: var(
    --title-gradient,
    linear-gradient(90deg, #0035C7 0%, #00217E 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}
.temp-sec__ttl--sub {
  display: block;
  background: #333;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  margin: 24px 0;
}
.temp-sec__ttl--jp {
  display: block;
  background: #666;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  margin: 24px 0;
}
.temp-sec__dsc {
  color: #666;
  text-align: center;
  font-style: normal;
  line-height: 1.6;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .temp-sec {
    max-width: 1200px;
    padding: 90px;
    margin: 0 auto;
  }
  .temp-sec__ttl {
    font-size: 3rem;
  }
  .temp-sec__ttl--sub {
    font-size: 2rem;
  }
  .temp-sec__ttl--jp {
    font-size: 1rem;
  }
  .temp-btn__detail a {
    width: fit-content;
    font-size: .9375rem;
    transition: filter .5s ease;
  }
}
@media (max-width: 767px) {
  .temp-sec {
    font-size: .875rem;
    padding: 30px;
  }
  .temp-sec__ttl {
    font-size: 2rem;
  }
  .temp-sec__ttl--sub {
    font-size: 1.5rem;
  }
  .temp-sec__ttl--jp {
    font-size: .9375rem;
  }
  .temp-sec__dsc {
    font-size: .875rem;
  }
}

/********************
  C1 hero
********************/

.hero01 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero01__inner {
  max-width: 100%;
}
.hero01__ttl {
  color: #036;
  font-style: normal;
  font-weight: 700;
}
.hero01__ttl--sub {
  display: block;
  color: #666;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 1rem;
}
.hero01__link {
  margin-top: 2rem;
  display: flex;
  max-width: 480px;
  align-items: flex-start;
  gap: 20px;
}
.hero01__link p {
  margin-top: 0!important;
}
.hero01__link a {
  display: flex;
  height: 56px;
  justify-content: center;
  align-items: center;
  text-decoration: none!important;
  font-weight: 900;
  border-radius: 4px;
}
.hero01__link--contact a {
  background-image: linear-gradient( -180deg, rgb(254,184,0) 0%, rgb(255,151,2) 100%);
  color: #FFF!important;
  flex-shrink: 0;
}
.hero01__link--download a {
  color: #06C!important;
  border: 2px solid #06C;
  background: #FFF;
}

@media (min-width: 768px) {
  .hero01 {
    height: 600px;
    padding: 80px 60px;
  }
  .hero01__inner {
    width: 1200px;
  }
  .hero01__ttl {
    font-size: 2.5625rem;
    line-height: 1.4;
    width: 480px;
  }
  .hero01__link {
  }
  .hero01__link a {
    transition: filter .5s ease;
  }
  .hero01__link--contact a {
    width: 240px;
  }
  .hero01__link--contact a:hover {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(254,184,0,.5)); 
  }
  .hero01__link--download a {
    width: 217px;
  }
  .hero01__link--download a:hover {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(0,102,204,.5)); 
  }
}
@media (max-width: 767px) {
  .hero01 {
    height: 700px;
    padding: 30px 20px;
    align-items: flex-start;
  }
  .hero01__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    text-align: center;
  }
  .hero01__ttl {
    font-size: 1.9375rem;
    line-height: 1.3;
  }
  .hero01__link {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    margin-left: 0;
    margin-right: 0;
    max-width:100%!important;
  }
  .hero01__link p {
    width: 100%;
  }
  .hero01__link a {
    width:100%!important;
  }
}

/********************
  C2 ソリューション
********************/

/* C2-03 */
.c2-03__comparison {
  display: flex;
  gap: 100px;
  align-self: stretch;
  background: #FFF;
}
.c2-03__comparison--before {
  border: 1px solid #717171;
}
.c2-03__comparison--after {
  border: 1px solid #0035C7;
}
.c2-03__comparison--before + .c2-03__comparison--after {
  position: relative;
}
.c2-03__comparison--before + .c2-03__comparison--after::before {
  position: absolute;
  display: block;
  content: '';
  width: 80px;
  height: 80px;
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M6.66675 16H25.3334' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 6.66663L25.3333 16L16 25.3333' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / auto no-repeat,
    linear-gradient(180deg, #FEB800 0%, #FF9702 100%);
}
.c2-03__comparison--ttl {
  line-height: 1.5;
  font-weight: 700;
  color: #FFF;
}
.c2-03__comparison--before .c2-03__comparison--ttl {
  background: linear-gradient(180deg, #666 0%, #999 100%);
}
.c2-03__comparison--after .c2-03__comparison--ttl {
  background: linear-gradient(180deg, #00217E 0%, #0035C7 100%);
}

.c2-03__comparison--list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c2-03__comparison--list li {
  position: relative;
  font-weight: 500;
  line-height: 1.2;
  padding-left: 30px;
}
.c2-03__comparison--list li span {
  display: block;
  font-weight: 400;
}
.c2-03__comparison--list li::before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
}
.c2-03__comparison--before .c2-03__comparison--list li {
  color: #333;
}
.c2-03__comparison--before .c2-03__comparison--list li span {
  color: #666;
}
.c2-03__comparison--before .c2-03__comparison--list li::before {
  content: '×';
  color: #E53E3E;
}
.c2-03__comparison--after .c2-03__comparison--list li {
  color: #00217E;
}
.c2-03__comparison--after .c2-03__comparison--list li span {
  color: #1E40AF;
}
.c2-03__comparison--after .c2-03__comparison--list li::before {
  content: '✓';
  color: #22C55E;
}

@media (min-width: 768px) {
  .c2-03__comparison {
    justify-content: center;
    align-items: flex-start;
    margin-top: 48px;
  }
  .c2-03__comparison section {
    padding: 32px;
    width: 420px;
  }
  .c2-03__comparison--before + .c2-03__comparison--after::before {
    top: 50%;
    right: 100%;
    transform: translate(-10px,-50%);
  }
  .c2-03__comparison--ttl {
    padding: 20px;
    font-size: 1.5rem;
    margin: -32px -32px 32px;
  }

  .c2-03__comparison--list li span {
    font-size: .8125rem;
  }
}
@media (max-width: 767px) {
  .c2-03__comparison {
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
  }
  .c2-03__comparison section {
    padding: 16px;
    width: 100%;
  }
  .c2-03__comparison--before + .c2-03__comparison--after::before {
    bottom: 100%;
    right: 50%;
    transform: translate(50%,-10px) rotate(90deg);
  }
  .c2-03__comparison--ttl {
    padding: 4px;
    text-align: center;
    font-size: 1.125rem;
    margin: -16px -16px 16px;
  }
  .c2-03__comparison--list li {
    font-size: .875rem;
  }
  .c2-03__comparison--list li span {
    font-size: .75rem;
  }
}



/********************
  C3 機能概要
********************/

/* C3-01 */
.c3-01__sec {
  display: flex;
  gap: 24px;
  color: #666;
  line-height: 1.875;
}
.c3-01__sec--img img {
  width: 100%;
}
.c3-01__sec--ttl {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  color: #00217E;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}
.c3-01__sec--ttl[data-num] {
  line-height: 40px;
}
.c3-01__sec--ttl[data-num]::before {
  content: attr(data-num);
  display: flex;
  width: 50px;
  height: 50px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: .7;
  background: linear-gradient(180deg, #00217E 0%, #0035C7 100%);
  white-space: nowrap;
}
.c3-01__sec--txt {
  width: 100%;
}
.c3-01__sec--img {
  width: 100%;
}

@media (min-width: 768px) {
  .c3-01__sec {
    align-items: center;
    align-self: stretch;
  }
  .c3-01 .temp-sec__inner {
    margin-top: 60px;
  }
  .c3-01__sec:nth-of-type(odd) {
    flex-direction: row-reverse;
  }
  .c3-01__sec:nth-child(n+2) {
    margin-top: 80px;
  }
  .c3-01__sec--ttl {
    font-size: 2rem;
  }
}
@media (max-width: 767px) {
  .c3-01__sec {
    flex-direction: column-reverse;
  }
  .c3-01__sec:nth-child(n+2) {
    margin-top: 60px;
  }
  .c3-01 .temp-sec__inner {
    margin-top: 30px;
  }
  .c3-01__sec--ttl {
    font-size: 1.5rem;
  }
}


/********************
  C4 フロー
********************/

/* C4-02 */

.c4-02__timeline {
  position: relative;
  counter-reset: step;
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
}
.c4-02__timeline--step {
  counter-increment: step;
  position: relative;
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  border: 1px solid #E5E7EB;
  background: #FFF;
  width: 100%;
}
.c4-02__timeline--step > * {
  margin-top: 0!important;
}
.c4-02__timeline--step::before {
  content: '0' counter(step);
  position: absolute;
  color: #999;
  font-size: 1.5rem;
  font-style: normal;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #E7E9ED;
  background: #F5F5F5;
}
.c4-02__timeline--step.active::before {
  color: #FFF;
  border: none;
  background: linear-gradient(225deg, #00217E 14.64%, #0035C7 85.36%);
}
.c4-02__timeline--step.now::before {
  color: #FFF;
  border: none;
  background: linear-gradient(225deg, #FEB800 14.64%, #FF9702 85.36%);
}
.c4-02__timeline--ttl {
  font-size: 1.125rem;
}
.c4-02__timeline--step.active .c4-02__timeline--ttl {
  color: #00217E;
}
.c4-02__timeline--step.now .c4-02__timeline--ttl {
  background: linear-gradient(225deg, #FEB800 14.64%, #FF9702 85.36%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c4-02__timeline--txt {
  color: #666;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.4;
}
.c4-02__timeline--period {
  color: #666;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 3px;
  border: 1px solid #E7E9ED;
  background: #F5F5F5;
}
.c4-02__timeline--period::before {
  white-space: nowrap;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #666;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.99992 14.6663C11.6818 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6818 1.33301 7.99992 1.33301C4.31802 1.33301 1.33325 4.31778 1.33325 7.99967C1.33325 11.6816 4.31802 14.6663 7.99992 14.6663Z' fill='none' stroke='black' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 4V8L10.6667 9.33333' fill='none' stroke='black' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.99992 14.6663C11.6818 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6818 1.33301 7.99992 1.33301C4.31802 1.33301 1.33325 4.31778 1.33325 7.99967C1.33325 11.6816 4.31802 14.6663 7.99992 14.6663Z' fill='none' stroke='black' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 4V8L10.6667 9.33333' fill='none' stroke='black' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.c4-02__timeline--period[data-icon="zap"]::before {
  width:12px;
  height:12px;
  background-color:#fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 7.00033C1.90538 7.00065 1.81261 6.97412 1.73247 6.92381C1.65233 6.87351 1.58811 6.8015 1.54727 6.71615C1.50643 6.6308 1.49064 6.53562 1.50175 6.44165C1.51285 6.34769 1.55039 6.25881 1.61 6.18533L6.56 1.08533C6.59713 1.04247 6.64773 1.0135 6.70349 1.00319C6.75925 0.99288 6.81686 1.00183 6.86686 1.02858C6.91686 1.05532 6.95629 1.09827 6.97866 1.15038C7.00104 1.20249 7.00503 1.26065 6.99 1.31533L6.03 4.32533C6.00169 4.40109 5.99218 4.48259 6.00229 4.56283C6.0124 4.64307 6.04183 4.71967 6.08804 4.78604C6.13426 4.85241 6.19588 4.90658 6.26763 4.94391C6.33938 4.98123 6.41912 5.00059 6.5 5.00033H10C10.0946 5 10.1874 5.02653 10.2675 5.07684C10.3477 5.12714 10.4119 5.19915 10.4527 5.2845C10.4936 5.36985 10.5093 5.46503 10.4982 5.559C10.4871 5.65296 10.4496 5.74185 10.39 5.81533L5.44 10.9153C5.40287 10.9582 5.35227 10.9871 5.29651 10.9975C5.24074 11.0078 5.18313 10.9988 5.13313 10.9721C5.08313 10.9453 5.0437 10.9024 5.02133 10.8503C4.99895 10.7982 4.99496 10.74 5.01 10.6853L5.97 7.67533C5.9983 7.59956 6.00781 7.51807 5.9977 7.43782C5.98759 7.35758 5.95817 7.28099 5.91195 7.21461C5.86574 7.14824 5.80411 7.09407 5.73236 7.05675C5.66061 7.01942 5.58087 7.00006 5.5 7.00033H2Z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 7.00033C1.90538 7.00065 1.81261 6.97412 1.73247 6.92381C1.65233 6.87351 1.58811 6.8015 1.54727 6.71615C1.50643 6.6308 1.49064 6.53562 1.50175 6.44165C1.51285 6.34769 1.55039 6.25881 1.61 6.18533L6.56 1.08533C6.59713 1.04247 6.64773 1.0135 6.70349 1.00319C6.75925 0.99288 6.81686 1.00183 6.86686 1.02858C6.91686 1.05532 6.95629 1.09827 6.97866 1.15038C7.00104 1.20249 7.00503 1.26065 6.99 1.31533L6.03 4.32533C6.00169 4.40109 5.99218 4.48259 6.00229 4.56283C6.0124 4.64307 6.04183 4.71967 6.08804 4.78604C6.13426 4.85241 6.19588 4.90658 6.26763 4.94391C6.33938 4.98123 6.41912 5.00059 6.5 5.00033H10C10.0946 5 10.1874 5.02653 10.2675 5.07684C10.3477 5.12714 10.4119 5.19915 10.4527 5.2845C10.4936 5.36985 10.5093 5.46503 10.4982 5.559C10.4871 5.65296 10.4496 5.74185 10.39 5.81533L5.44 10.9153C5.40287 10.9582 5.35227 10.9871 5.29651 10.9975C5.24074 11.0078 5.18313 10.9988 5.13313 10.9721C5.08313 10.9453 5.0437 10.9024 5.02133 10.8503C4.99895 10.7982 4.99496 10.74 5.01 10.6853L5.97 7.67533C5.9983 7.59956 6.00781 7.51807 5.9977 7.43782C5.98759 7.35758 5.95817 7.28099 5.91195 7.21461C5.86574 7.14824 5.80411 7.09407 5.73236 7.05675C5.66061 7.01942 5.58087 7.00006 5.5 7.00033H2Z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.c4-02__timeline--period[data-icon="infinity"]::before {
  width: 14px;
  height: 14px;
  background-color: #999;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.50008 9.33366C6.41675 9.33366 7.58342 4.66699 10.5001 4.66699C11.1189 4.66699 11.7124 4.91282 12.15 5.35041C12.5876 5.78799 12.8334 6.38149 12.8334 7.00033C12.8334 7.61916 12.5876 8.21266 12.15 8.65024C11.7124 9.08783 11.1189 9.33366 10.5001 9.33366C7.58342 9.33366 6.41675 4.66699 3.50008 4.66699C2.88124 4.66699 2.28775 4.91282 1.85017 5.35041C1.41258 5.78799 1.16675 6.38149 1.16675 7.00033C1.16675 7.61916 1.41258 8.21266 1.85017 8.65024C2.28775 9.08783 2.88124 9.33366 3.50008 9.33366Z' fill='none' stroke='black' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.50008 9.33366C6.41675 9.33366 7.58342 4.66699 10.5001 4.66699C11.1189 4.66699 11.7124 4.91282 12.15 5.35041C12.5876 5.78799 12.8334 6.38149 12.8334 7.00033C12.8334 7.61916 12.5876 8.21266 12.15 8.65024C11.7124 9.08783 11.1189 9.33366 10.5001 9.33366C7.58342 9.33366 6.41675 4.66699 3.50008 4.66699C2.88124 4.66699 2.28775 4.91282 1.85017 5.35041C1.41258 5.78799 1.16675 6.38149 1.16675 7.00033C1.16675 7.61916 1.41258 8.21266 1.85017 8.65024C2.28775 9.08783 2.88124 9.33366 3.50008 9.33366Z' fill='none' stroke='black' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.c4-02__timeline--step.active .c4-02__timeline--period {
  border: 1px solid #0035C7;
  background: #F0F8FF;
}
.c4-02__timeline--step.active .c4-02__timeline--period::before {
  background: #0035C7;
}
.c4-02__timeline--step.now .c4-02__timeline--period {
  border: none;
  background: linear-gradient(180deg, #FEB800 0%, #FF9702 100%);
  color: #FFF;
}
.c4-02__timeline--step.now .c4-02__timeline--period::before {
  background-color: #FFF;
}

@media (min-width: 768px) {
  .c4-02__timeline {
    justify-content: center;
    gap: 30px;
    padding-top: 76px;
    margin-top: 60px;
  }
  .c4-02__timeline::before {
    display: block;
    content: '';
    position: absolute;
    top: 30px;
    left: 40px;
    width: calc(100% - 80px);
    height: 1px;
    background: #D9D9D9;
  }
  .c4-02__timeline--step {
    gap: 12px;
  }
  .c4-02__timeline--step::before {
    bottom: 100%;
    left: 50%;
    transform: translate(-50%,-16px);
    font-weight: 700;
    width: 60px;
    height: 60px;
  }
  .c4-02__timeline--ttl {
    font-weight: 900;
    line-height: 1.4;
  }
  .c4-02__timeline--period {
    font-size: .75rem;
    padding: 8px;
  }
}
@media (max-width: 767px) {
  .c4-02__timeline {
    flex-direction: column;
    padding-left: 56px;
    margin-top: 30px;
  }
  .c4-02__timeline--step {
    gap: 8px;
  }
  .c4-02__timeline--step::before {
    top: 0;
    right: 100%;
    transform: translate(-16px,0);
    font-weight: 900;
    width: 40px;
    height: 40px;
  }
  .c4-02__timeline--step::after {
    position: absolute;
    top: 46px;
    right: 100%;
    transform: translate(-34px,0);
    display: block;
    content: '';
    width: 4px;
    height: calc(100% - 70px);
    background: #E5E7EB;
  }
  .c4-02__timeline--ttl {
    font-weight: 700;
    line-height: 1.6666;
  }
  .c4-02__timeline--period {
    font-size: .875rem;
    padding: 8px 16px;
  }
}



/********************
  C9 料金プラン
********************/

/* C9-03 */

.c9-03 {
  max-width: 910px;
}
.c9-03__sec--ttl {
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  background: var(
    --title-gradient,
    linear-gradient(90deg, #0035C7 0%, #00217E 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c9-03__price {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: linear-gradient(225deg, #00217E 14.64%, #0035C7 85.36%);
  gap: 8px;
  color: #FFF;
  line-height: 1.2;
}
.c9-03__price--catch {
  color: #FFF;
text-align: center;
font-family: "Noto Sans JP";
font-size: 48px;
font-style: normal;
font-weight: 900;
}
.c9-03__price--number {
  color: #FFF;
text-align: center;
font-family: "Noto Sans JP";
font-size: 72px;
font-style: normal;
font-weight: 900;
}
.c9-03__price--currency {
  display: flex;
  width: 24px;
  height: 39px;
  flex-direction: column;
  justify-content: flex-end;
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
}
.c9-03__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
.c9-03__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  color: #333;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  flex: 1 0 0;
}
.c9-03__list li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.1678 8.33357C18.5484 10.2013 18.2772 12.1431 17.3994 13.8351C16.5216 15.527 15.0902 16.8669 13.3441 17.6313C11.5979 18.3957 9.64252 18.5384 7.80391 18.0355C5.9653 17.5327 4.35465 16.4147 3.24056 14.8681C2.12646 13.3214 1.57626 11.4396 1.68171 9.53639C1.78717 7.63318 2.54189 5.82364 3.82004 4.40954C5.09818 2.99545 6.82248 2.06226 8.70538 1.76561C10.5883 1.46897 12.516 1.82679 14.167 2.7794' stroke='%2322C55E' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 9.16732L10 11.6673L18.3333 3.33398' stroke='%2322C55E' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.c9-03__contact {
  display: flex;
  width: 100%;
  padding: 24px; 
  align-self: stretch;
  background: #333;
  color: #FFF;
}
.c9-03__contact--tel {
  color: #CCC;
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0!important;
}
.c9-03__contact--tel a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFF!important;
  text-decoration: none!important;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.c9-03__contact--tel a::before {
  content: "";
  display: inline-block;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M18.443 22.09C18.7184 22.2165 19.0286 22.2454 19.3226 22.1719C19.6166 22.0985 19.8768 21.9271 20.0603 21.686L20.5337 21.066C20.782 20.7348 21.1041 20.466 21.4744 20.2809C21.8447 20.0957 22.253 19.9993 22.667 19.9993H26.667C27.3742 19.9993 28.0525 20.2803 28.5526 20.7804C29.0527 21.2805 29.3337 21.9588 29.3337 22.666V26.666C29.3337 27.3733 29.0527 28.0515 28.5526 28.5516C28.0525 29.0517 27.3742 29.3327 26.667 29.3327C20.3018 29.3327 14.1973 26.8041 9.69643 22.3032C5.19556 17.8024 2.66699 11.6979 2.66699 5.33268C2.66699 4.62544 2.94794 3.94716 3.44804 3.44706C3.94814 2.94697 4.62641 2.66602 5.33366 2.66602H9.33366C10.0409 2.66602 10.7192 2.94697 11.2193 3.44706C11.7194 3.94716 12.0003 4.62544 12.0003 5.33268V9.33268C12.0003 9.74667 11.9039 10.155 11.7188 10.5253C11.5337 10.8955 11.2648 11.2176 10.9337 11.466L10.3097 11.934C10.0649 12.1209 9.89235 12.3868 9.82138 12.6865C9.75041 12.9862 9.78537 13.3012 9.92033 13.578C11.7426 17.2792 14.7396 20.2724 18.443 22.09Z' stroke='white' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.c9-03__contact--form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
.c9-03__contact--form li {
  align-self: stretch;
}
.c9-03__contact--form-app a {
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #FEB800 0%, #FF9702 100%);
  color: #FFF!important;
  font-weight: 900;
  line-height: 1.2 ;
  text-decoration: none!important;
  width: 100%;
}
.c9-03__contact--form-app a::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.33301 8H12.6663' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.33398L12.6667 8.00065L8 12.6673' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.c9-03__contact--form-dl a {
  display: flex;
  padding: 12px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  color: #333!important;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none!important;
  border-radius: 4px;
  border: 1px solid #E5E7EB;
  background: #FFF;
  width: 100%;
}
.c9-03__contact--form-dl a::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 10V2' stroke='%23333333' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke='%23333333' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66699 6.66602L8.00033 9.99935L11.3337 6.66602' stroke='%23333333' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

@media (min-width: 768px) {
  .c9-03__sec {
    margin: 60px 0;
  }
  .c9-03__sec--ttl {
    font-size: 2rem;
  }
  .c9-03__sec--ttl:not(:last-child) {
    margin-bottom: 40px;
  }
  .c9-03__price:not(:last-child) {
    margin-bottom: 32px;
  }
  .c9-03__contact {
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }
  .c9-03__contact--tel a::before {
    width: 32px;
    height: 32px;
  }
  .c9-03__contact--form {
    width: 350px;
  }
  .c9-03__contact--form a {
    border-radius: 4px;
  }
  .c9-03__contact--form a  {
    transition: filter .5s ease;
  }
  .c9-03__contact--form-app a:hover {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(254,184,0,.5)); 
  }
  .c9-03__contact--form-dl a:hover {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(255,255,255,.5)); 
  }
}
@media (max-width: 767px) {
  .c9-03__sec {
    margin: 30px 0;
  }
  .c9-03__sec--ttl {
    font-size: 1.25rem;
  }
  .c9-03__sec--ttl:not(:last-child) {
    margin-bottom: 24px;
  }
  .c9-03__price:not(:last-child) {
    margin-bottom: 24px;
  }
  .c9-03__list li {
    font-size: .875rem;
  }
  .c9-03__contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .c9-03__contact--tel {
    justify-content: center;
    align-self: stretch;
  }
  .c9-03__contact--tel a::before {
    width: 24px;
    height: 24px;
  }
  .c9-03__contact--form-app a {
    font-size: .875rem;
  }
  .c9-03__contact--form a {
    border-radius: 2px;
  }
}


/********************
  C10 FAQ
********************/

/* C10-01 */
.c10-01__qa-list {
  margin-top: 40px;
}
.c10-01__qa-list--q {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #333;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid #E5E7EB;
  background: #FFF;
}
.c10-01__qa-list--q:nth-child(n+2) {
  margin-top: 16px!important;
}
.c10-01__qa-list--a {
  position: relative;
  border-bottom: 1px solid #E2E8F0;
  background: #F8FAFC;
  font-weight: 500;
}
.c10-01__qa-list--q::before,
.c10-01__qa-list--a::before {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 4px;
}
.c10-01__qa-list--q::before {
  content: 'Q';
  background: linear-gradient(225deg, #00217E 14.64%, #0035C7 85.36%);
}
.c10-01__qa-list--a::before {
  position: absolute;
  content: 'A';
  background: linear-gradient(225deg, #FEB800 14.64%, #FF9702 85.36%);
}
.c10-01__qa-list--a > *:first-child {
  margin-top: 0!important;
}
.c10-01__qa-list--a > *:nth-child(n+2) {
  margin-top: 12px!important;
}
.c10-01__qa-list--a-note {
  font-style: normal;
  font-weight: 400;
}
.c10-01__qa-list--a-list {
  font-style: normal;
}
.c10-01__qa-list--a-list li {
  display: flex;
  gap: 6px;
}
.c10-01__qa-list--a-list li::before {
  content: '・';
  color: #0035C7;
}
.c10-01__qa-list--a-note {
  font-weight: 400;
}
.c10-01__notice {
  display: flex;
  padding: 24px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  align-self: stretch;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #666;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 40px;
}
.c10-01__notice::before {
  content: "";
  display: block;
  min-width: 20px;
  height: 20px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M17.5005 17.5005L13.8838 13.8838' stroke='%230035C7' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z' stroke='%230035C7' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

@media (min-width: 768px) {
  .c10-01__qa-list--q {
    font-size: 1.5rem;
    padding: 10px 24px;
  }
  .c10-01__qa-list--a {
    font-size: 1.125rem;
    padding: 24px 24px 24px 68px;
  }
  .c10-01__qa-list--a::before {
    top: 24px;
    left: 24px;
  }
  .c10-01__qa-list--a-note {
    font-size: 1rem;
  }
}
@media (max-width: 767px) {
  .c10-01__qa-list--q {
    font-size: .875rem;
    padding: 10px 16px;
  }
  .c10-01__qa-list--a::before {
    top: 16px;
    left: 16px;
  }
  .c10-01__qa-list--a {
    font-size: .875rem;
    padding: 16px 16px 16px 60px;
  }
  .c10-01__notice {
    font-size: .875rem;
  }
}


/********************
  CTA
********************/

/* CTA01 */

.cta-01 {
  background: linear-gradient(225deg, #4A90E2 14.64%, #1E40AF 85.36%);
  color: #FFF;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cta-01__ttl {
  color: #FFF;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}
.cta-01__contact--form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
.cta-01__contact--form-dl a {
  display: flex;
  height: 56px;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 28px;
  background: linear-gradient(180deg, #FEB800 0%, #FF9702 100%);
  color: #FFF!important;
  text-decoration: none!important;
  font-weight: 900;
  line-height: 1.12;
}
.cta-01__contact--form-dl a::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 12.5V2.5' stroke='white' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5' stroke='white' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.8335 8.33325L10.0002 12.4999L14.1668 8.33325' stroke='white' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.cta-01__contact--form-app a {
  display: flex;
  width: 200px;
  height: 48px;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  background-color: #FFF;
  color: #1E40AF!important;
  text-decoration: none!important;
  border-radius: 24px;
  opacity: 0.9;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
}
.cta-01__contact--tel {
  display: flex;
  align-items: center;
  font-size: .875rem;
}
.cta-01__contact--tel a {
  font-weight: 700;
  line-height: 1.2;
  color: #FFF!important;
  text-decoration: none!important;
}

@media (min-width: 768px) {
  .cta-01 {
    padding: 90px;
  }
  .cta-01__ttl {
    font-size: 2rem;
  }
  .cta-01__contact--form {
    margin: 24px 0 32px;
  }
  .cta-01__contact--form-dl a {
    font-size: 1.125rem;
  }
  .cta-01__contact--form a  {
    transition: filter .5s ease;
  }
  .cta-01__contact--form-dl a:hover {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(254,184,0,.5)); 
  }
  .cta-01__contact--form-app a:hover {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(255,255,255,.5)); 
  }
  .cta-01__contact--tel {
    gap: 16px;
    padding-top: 20px;
  }
}
@media (max-width: 767px) {
  .cta-01 {
    padding: 30px;
  }
  .cta-01__ttl {
    font-size: 1.5rem;
  }
  .cta-01__contact--form {
    margin: 32px 0;
  }
  .cta-01__contact--form-dl a {
    font-size: .9375rem;
  }
  .cta-01__contact--tel {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
}