@charset "UTF-8";
:root {
  --primary: #2f2f2f;
  --secondary: #0c847e;
  --tertiary: #15709f;
  --accent1: #ab2323;
  --accent2: #203a6b;
  --accent3: #ffd6e0;
  --white: #fff;
  --gray: #748b8c;
  --pink: #ffd6e0;
  --light-blue: #cee1e5;
  --gradation1: linear-gradient(90deg, #167f79 0%, #146ea1 100%);
  --gradation2: linear-gradient(90deg, #d09808 0%, #ca470e 100%);
  --gradation3: linear-gradient(90deg, #91A7B2 0%, #86879D 100%);
  --gradation-bg1: linear-gradient(90deg, #e8feff 0%, #eaffed 50%, #fffef6 100%);
  --gradation-bg2: linear-gradient(180deg, #f7feff 0%, #d6edfa 100%);
  --outline: 2px solid var(--tertiary);
  --outline-offset: 2px;
  --underline-offset: .25em;
  --lh-normal: 1.8;
  --lh-narrow: 1.4;
  --fz-m: clamp(0.75rem, 0.625rem + 0.6vw, 1rem);
  --fz-l: clamp(0.875rem, 0.625rem + 1vw, 1.25rem);
  --v-gap-m: clamp(1.25rem, 0.5rem + 3.2vw, 2.5rem);
  --v-gap-l: clamp(1.875rem, 0.75rem + 4.8vw, 3.75rem);
  --header-h: 173px;
}
@media all and (max-width: 1176px) {
  :root {
    --header-h: 244px ;
  }
}
/* @media all and (min-width: 900px) {
  :root {
    --header-h: 100px ;
  }
} */
@media all and (max-width: 767px) {
  :root {
    --header-h: 148px ;
  }
}

  h1, h2, h3, h4, h5, h6{font-weight: 700;line-height: 1.4;}h1{color: var(--wp--preset--color--secondary);font-size: clamp(1.75rem, 1.613rem + 0.5vw, 2.0625rem);;font-style: normal;font-weight: 700;}h2{font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);}h3{color: var(--wp--preset--color--secondary);font-size: clamp(1rem, 0.875rem + 0.6vw, 1.25rem);}h4{color: var(--wp--preset--color--tertiary);font-size: clamp(0.875rem, 0.75rem + 0.6vw, 1.125rem);}

:where(h2),
.el_headingM,
.bl_lower_title {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: 700;
  line-height: var(--lh-narrow);
  text-align: center;
  background: var(--gradation1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
:where(h2).el_headingM__accent,
.el_headingM.el_headingM__accent,
.el_headingM__accent.bl_lower_title {
  background: var(--gradation2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.bl_floating_bg,
.bl_myformBnr,
.bl_btnFaq,
.bl_btnBnr {
  display: none;
}

.ly_footer > * {
  margin-top: 0;
}

.pattern {
  font-size: 15px;
  padding-top: 14.6666666667vw;
  margin-top: -55px;
  overflow-x: hidden;
}
.pattern-inner {
  background: #f4f8f9;
  padding-bottom: 10.6666666667%;
  margin: 0 auto;
  max-width: 100%;
  border-top: 2px solid #4f9390;
}
.pattern__button-back {
  display: block;
  width: 75.4666666667%;
  padding: 2.6666666667%;
  margin: 0 auto;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--tertiary);
  border-radius: 8px;
  font-size: 16px;
  background: var(--white);
  color: var(--tertiary);
}
.pattern__button-back-wrap {
  margin: 10.6666666667% auto 0;
}
.pattern__text-gradation {
  background: var(--gradation1);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}
.pattern__text-color {
  color: var(--secondary);
  font-weight: 700;
}
.pattern__head {
  background: var(--gradation1);
  padding: 3.7333333333% 0;
}
.pattern__head-title-img {
  display: block;
  width: 38.1333333333%;
  margin: 0 auto;
}
.pattern__head-title-text {
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  line-height: var(--lh-normal);
}
.pattern__section {
  width: 89.3333333333%;
  padding: 8% 5.3333333333%;
  margin: 0 auto;
  background-color: var(--white);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.pattern__section-lead {
  font-size: 18px;
  line-height: var(--lh-normal);
  text-align: center;
  background: var(--gradation1);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}
.pattern__section-text {
  font-size: 14px;
}
.pattern__section-button {
  display: block;
  width: 95.9322033898%;
  padding: 3.3898305085%;
  margin: 0 auto;
  background: var(--gradation1);
  color: var(--white);
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 16px;
}
.pattern__section-outer--separate {
  margin-top: 8%;
}
.pattern__section-outer--separate > .pattern__section-lead {
  color: var(--secondary);
  -webkit-text-fill-color: var(--secondary);
  font-size: 20px;
  margin-bottom: 5.3333333333%;
}
.pattern__phrase {
  position: relative;
  margin-top: 8.5333333333%;
  padding: 8% 5.3333333333%;
  background-color: var(--white);
}
.pattern__phrase::after {
  content: "";
  display: block;
  position: absolute;
  width: 6.6666666667%;
  padding-top: 5.6%;
  margin-top: -4.5333333333%;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: url(../images/diagnosis/pattern/arrow_phrase.svg) no-repeat center center;
  background-size: 100% auto;
}
.pattern__phrase-outer + .pattern__merit {
  margin-top: 10.6666666667%;
}
.pattern__entry-lead {
  color: var(--clr_black);
  text-align: center;
  line-height: var(--lh-normal);
  font-size: 18px;
}
.pattern__entry-img {
  margin: 2.9850746269% auto;
}
.pattern__entry-text {
  font-size: 14px;
}
.pattern__entry-text + .pattern__entry-text {
  margin-top: 1em;
}
.pattern__merit {
  margin-top: 5.3333333333%;
}
.pattern__merit-lists {
  list-style: none;
}
.pattern__merit-list {
  display: flex;
  align-items: center;
  margin-top: 6.7796610169%;
}
.pattern__merit-list-text {
  width: 69.4915254237%;
  font-size: 14px;
}
.pattern__merit-list-img {
  width: 23.7288135593%;
  margin-right: 6.7796610169%;
}
.pattern__merit-list-img > img {
  display: block;
  width: 100%;
}
.pattern__merit-button-wrap {
  margin-top: 6.7796610169%;
}
.pattern__assistant {
  margin-top: 8%;
}
.pattern__assistant-img {
  margin: 6.7796610169% auto;
}
.pattern__assistant-button-wrap {
  margin-top: 6.7796610169%;
}
.pattern__answer-inner {
  padding: 5.3333333333% 5.3333333333% 8%;
}
.pattern__answer-lead {
  position: relative;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
}
.pattern__answer-lead::before, .pattern__answer-lead::after {
  content: "";
  display: block;
  position: absolute;
  width: 33.1343283582%;
  padding-top: 2px;
  border-radius: 10px;
  background-color: var(--light-blue);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.pattern__answer-lead::before {
  left: 0;
}
.pattern__answer-lead::after {
  right: 0;
}
.pattern__answer-text {
  font-size: 15px;
}
.pattern__answer-lists, .pattern__answer-list {
  list-style: none;
}
.pattern__answer-list {
  margin-top: 5.9701492537%;
}
.pattern__answer-list-label {
  text-align: center;
  line-height: 1;
}
.pattern__answer-list-label > span {
  display: inline-block;
  width: 37.6119402985%;
  margin: 0 auto;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  background-color: var(--secondary);
  border-radius: 20px;
  padding: 0.2985074627% 0;
}
.pattern__answer-list-content {
  text-align: center;
  margin-top: 2.9850746269%;
}
.pattern__answer-list-text {
  font-size: 14px;
}
.pattern__answer-list-lead {
  font-size: 15px;
  font-weight: 700;
}
.pattern__result-inner {
  padding: 5.3333333333%;
}
.pattern__result-lead {
  margin-bottom: 4.4776119403%;
  color: var(--clr_black);
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: var(--lh-normal);
}
.pattern__result-text {
  display: block;
  margin-top: 4.4776119403%;
  margin-bottom: 2.9850746269%;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}
.pattern__description-outer {
  width: 89.3333333333%;
  margin: 0 auto;
}
.pattern__description-outer + .pattern__section-outer--separate {
  margin-top: 10.6666666667%;
}
.pattern__description-lead {
  position: relative;
  margin: 0 auto 5.9701492537%;
  text-align: center;
  font-size: 18px;
  line-height: var(--lh-normal);
  padding: 2.3880597015% 0;
}
.pattern__description-lead::before, .pattern__description-lead::after {
  content: "";
  display: block;
  position: absolute;
  padding-top: 2px;
  border-radius: 10px;
  background-color: var(--light-blue);
  right: 0;
  left: 0;
}
.pattern__description-lead::before {
  top: 0;
}
.pattern__description-lead::after {
  bottom: 0;
}
.pattern__description-img {
  width: 77.6119402985%;
  margin: 0 auto 5.9701492537%;
}
.pattern__description-img > img {
  display: block;
}
.pattern__description-text {
  font-size: 15px;
  line-height: var(--lh-normal);
}
@media all and (min-width: 768px) {
  .pattern {
    position: relative;
    padding-top: 0;
    margin-top: 0;
    font-size: 22px;
    background: url("../images/diagnosis/top/bg-pc.jpg") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
  }
  .pattern-inner {
    max-width: 562px;
    padding-bottom: 60px;
    -webkit-filter: drop-shadow(0 0 20px #CFDEE6);
            filter: drop-shadow(0 0 20px #CFDEE6);
    border-top: none;
  }
  .pattern__button-back {
    font-size: 24px;
  }
  .pattern__section-lead {
    font-size: 27px;
  }
  .pattern__section-text {
    font-size: 21px;
  }
  .pattern__section-button {
    font-size: 24px;
  }
  .pattern__section-outer--separate > .pattern__section-lead {
    font-size: 30px;
  }
  .pattern__entry-lead {
    font-size: 27px;
  }
  .pattern__entry-text {
    font-size: 21px;
  }
  .pattern__merit-list-text {
    font-size: 21px;
  }
  .pattern__answer-lead {
    font-size: 22px;
  }
  .pattern__answer-text {
    font-size: 22px;
  }
  .pattern__answer-list-label > span {
    font-size: 18px;
  }
  .pattern__answer-list-text {
    font-size: 21px;
  }
  .pattern__answer-list-lead {
    font-size: 22px;
  }
  .pattern__result-lead {
    font-size: 27px;
  }
  .pattern__result-text {
    font-size: 36px;
  }
  .pattern__description-lead {
    font-size: 27px;
  }
  .pattern__description-text {
    font-size: 22px;
  }
}
@media (hover: hover) {
  .pattern__button-back:hover {
    background: var(--tertiary);
    color: var(--white);
    border-color: transparent;
  }
  .pattern__section-button:hover {
    background: var(--white);
    color: var(--secondary);
    border-color: var(--currentColor);
  }
}