@charset "utf-8";

/* reset ------------- */
*,
*:before,
*:after {
  background: transparent;
  border: 0;
  box-sizing: border-box;
  font-weight: inherit;
  font-size: inherit;
  font-style: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
}
article,
aside,
details,
figcaption,
figure,
picture,
main,
footer,
header,
hgroup,
menu,
nav,
section { display: block; }
ul,
ol { list-style: none; }
blockquote,
q { quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: none; }
table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
button { font-family: inherit; }
strong { font-weight: 600; }



/* base color ------------- */
:root {
  --blue: #1663c0;
  --orange: #f5993f;
  --bluegreen: #0ebdd5;
  --skyblue: #f4f8ff;
  --green: #439f47;
  --yellow: #fae758;
  --gradation-dark: #2c78cd;
  --gradation-light: #5095de;
}



/* html body main ------------- */
html { height: 100%; }
body {
  color: #24375a;
  display: flex;
  flex-direction: column;
  font-family: "Zen Maru Gothic", system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  min-height: 100%;
  overflow-x: hidden;
}
a:focus { outline: none!important; }



/* button ------------- */
.button {
  align-items: center;
  border-radius: 2em;
  border-style: solid;
  border-width: 2px;
  display: flex;
  justify-content: center;
  position: relative;
  text-decoration: none;
}
@media screen and (min-width: 1367px) {
.button {
  border-radius: 180px;
  border-width: 3px;
  height: 89px;
  transition: .3s;
  width: 347px;
}
.button:hover { transform: translateY(-5px); }
}

.button:before,
.button:after {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.button:after { right: 1em; }
@media screen and (min-width: 1367px) {
.button:after {
  height: 14px;
  right: 30px;
  transition: .3s;
  width: 25px;
}
.button:hover:after { right: 20px; }
}

.button.color_orange {
  background-color: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
@media screen and (min-width: 1367px) {
.button.color_orange:hover {
  background-color: #fff;
  color: var(--orange);
}
}

.button.color_orange:after { background-image: url(/html/user_data/assets/img/lp/personarize-products/arrow_white.png); }
@media screen and (min-width: 1367px) {
.button.color_orange:hover:after { background-image: url(/html/user_data/assets/img/lp/personarize-products/arrow_orange.png); }
}

.button.color_blue {
  background-color: #fff;
  border-color: var(--blue);
  color: var(--blue);
}
@media screen and (min-width: 1367px) {
.button.color_blue:hover {
  background-color: var(--blue);
  color: #fff;
}
}

.button.color_blue:after { background-image: url(/html/user_data/assets/img/lp/personarize-products/arrow_blue.png); }
@media screen and (min-width: 1367px) {
.button.color_blue:hover:after { background-image: url(/html/user_data/assets/img/lp/personarize-products/arrow_white.png); }
}

.button span {
  display: inline-block;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.375;
}



/* header ------------- */
.header {
  background-color: rgba(255, 255, 255, .63);
  position: fixed;
  width: 100%;
  z-index: 3;
}
@media screen and (min-width: 1367px) {
.header {
  display: flex;
  justify-content: center;
  padding: 0 40px;
}
}

.header_inner {
  align-items: center;
  display: flex;
  height: 50px;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 1367px) {
.header_inner {
  justify-content: space-between;
  height: 80px;
  width: 1464px;
}
}

.header_logo { display: block; }

.header_logo {
  display: block;
  text-decoration: none;
  width: 134px;
}
@media screen and (min-width: 1367px) {
.header_logo {
  transition: .3s;
  width: 255px;
}
.header_logo:hover { opacity: .7; }
}

.header_logo img {
  display: block;
  height: auto;
  width: 100%;
}

@media screen and (max-width: 1366px) {
.header_nav {
  background-color: rgba(22, 99, 192, .8);
  height: 100%;
  left: -60%;
  position: fixed;
  top: 0;
  transition: all .5s;
  width: 60%;
}
.header_nav.open { left: 0; }
}
@media screen and (min-width: 1367px) {
.header_nav {
  background-color: transparent;
  display: block;
  position: static;
  width: 750px;
}
}

.header_nav ul {
  display: block;
  position: relative;
}
@media screen and (max-width: 1366px) {
.header_nav ul { padding: 3em 1em 2em; }
}
@media screen and (min-width: 1367px) {
.header_nav ul {
  display: flex;
  justify-content: space-between;
}
}

.header_nav li {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
@media screen and (min-width: 1367px) {
.header_nav li {
  font-size: 20px;
  line-height: 1.35;
}
}

@media screen and (max-width: 1366px) {
.header_nav li:nth-child(n+2) { margin-top: 1em; }
}

.header_nav li a {
  color: #fff;
  text-decoration: none;
}
@media screen and (min-width: 1367px) {
.header_nav li a {
  color: #24375a;
  display: inline-block;
  transition: .3s;
}
.header_nav li a:hover {
  color: var(--blue);
  text-decoration: none;
  transform: translateY(-3px);
}
.header_nav li a:visited,
.header_nav li a:active { text-decoration: none; }
}

.header_cta {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
}
@media screen and (max-width: 320px) {
.header_cta {
  right: 5px;
  width: 75px;
}
}
@media screen and (min-width: 1367px) {
.header_cta {
  position: static;
  transform: none;
  width: 142px;
}
}

.header_cta .button {
  font-size: 11px;
  height: 30px;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.header_cta .button {
  font-size: 14px;
  height: 43px;
}
}

.header_cta .button:after { display: none; }



/* humberger  ------------- */
.hamburger {
  display: flex;
  flex-direction: column;
  height: 20px;
  justify-content: space-between;
  padding: 0;
  position: fixed;
  left: .5em;
  top: 15px;
  width: 30px;
  z-index: 9998;
}
@media screen and (min-width: 1367px) {
.hamburger { display: none; }
}

.hamburger span {
  background-color: var(--blue);
  border-radius: 2px;
  display: block;
  height: 3px;
  transition: .6s;
  width: 100%;
}
.hamburger span { width: 30px; }
.hamburger.active span { background-color: #fff; }
.hamburger.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* main ------------- */
.main { flex: 1; }



/* introduction ------------- */
.introduction { position: relative; }

.introduction_header {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/keyvisual_sp.png);
  background-position: right -7em center;
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: ellipse(150% 100% at top center);
  height: 500px;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.introduction_header {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/keyvisual_pc.png);
  background-position: right -7em center;
  background-size: cover;
  clip-path: ellipse(85% 100% at top center);
  height: 570px;
  padding-top: 70px;
}
}
@media screen and (min-width: 1367px) {
.introduction_header {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/keyvisual_pc.png);
  background-position: right center;
  background-size: inherit;
  clip-path: ellipse(85% 100% at top center);
  height: 1100px;
  padding-top: 110px;
}
}

.introduction_inner {
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 320px) {
.introduction_inner { background: linear-gradient(90deg, var(--skyblue) 30%, transparent); }
}
@media screen and (min-width: 321px) and (max-width: 414px) {
.introduction_inner { background: linear-gradient(90deg, var(--skyblue), transparent); }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.introduction_inner { width: 90%; }
}
@media screen and (min-width: 1367px) {
.introduction_inner {
  max-width: 1399px;
  width: 80%;
}
}

.introduction_inner h1 {
  font-size: 30px;
  font-weight: 600;
}
@media screen and (max-width: 414px) {
.introduction_inner h1 {
  padding: 60px 0 0 10px;
  line-height: 1.5;
  width: 70%;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.introduction_inner h1 {
  font-size: 30px;
  line-height: 1.3;
}
}
@media screen and (min-width: 1367px) {
.introduction_inner h1 {
  font-size: 74px;
  line-height: 1.3;
}
}

.introduction_inner h1 span { font-size: .82em; }

.introduction_inner h1 strong {
  color: var(--blue);
  font-weight: 600;
}

.introduction_inner h1 div { margin-bottom: 17px; }
@media screen and (max-width: 414px) {
.introduction_inner h1 div { width: 55%; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.introduction_inner h1 div {
  margin-bottom: 10px;
  width: 120px;
}
}
@media screen and (min-width: 1367px) {
.introduction_inner h1 div {
  margin-bottom: 17px;
  width: 253px;
}
}

.introduction_inner h1 div img {
  display: block;
  height: auto;
  width: 100%;
}

@media screen and (max-width: 414px) {
.introduction_inner .button_wrap {
  padding: .5em 0 0 10px;
  width: 60%;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.introduction_inner .button_wrap {
  display: flex;
  justify-content: space-between;
  left: 0;
  position: absolute;
  top: 63%;
  width: 50%;
}
}
@media screen and (min-width: 1367px) {
.introduction_inner .button_wrap {
  display: flex;
  justify-content: space-between;
  left: 0;
  position: absolute;
  top: 63%;
  width: 714px;
}
}

@media screen and (max-width: 414px) {
.introduction_inner .button_wrap .button { height: 40px; }
.introduction_inner .button_wrap .button:nth-child(n+2) { margin-top: .5em; }
.introduction_inner .button_wrap .button span { font-size: 15px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.introduction_inner .button_wrap .button {
  height: 50px;
  width: 48%;
}
.introduction_inner .button_wrap .button span { font-size: 16px; }
}

.introduction_inner ul {
  position: absolute;
  right: 0;
  text-align: right;
  top: 70%;
  width: 236px;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.introduction_inner ul {
  top: 53%;
  width: 222px;
}
}
@media screen and (min-width: 1367px) {
.introduction_inner ul {
  top: 48%;
  width: 362px;
}
}

.introduction_inner li {
  background-color: rgba(22, 99, 192, .8);
  border-radius: 30px 0 0 30px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
  color: #fff;
  display: inline-block;
  position: relative;
}
@media screen and (max-width: 414px) {
.introduction_inner li {
  font-size: 13px;
  line-height: 30px;
  padding: 0 10px 0 30px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.introduction_inner li {
  border-radius: 30px;
  font-size: 13px;
  line-height: 30px;
  padding: 0 10px 0 30px;
}
}
@media screen and (min-width: 1367px) {
.introduction_inner li {
  border-radius: 30px;
  font-size: 19px;
  line-height: 60px;
  margin-top: 20px;
  padding: 0 26px 0 70px;
  transition: .3s;
}
.introduction_inner li:nth-child(1) { margin-top: 50px; }
.introduction_inner li:hover { transform: translateY(-5px); }
}

@media screen and (max-width: 1366px) {
.introduction_inner li:nth-child(n+2) { margin-top: .5em; }
}

.introduction_inner li:before {
  background-color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 10px;
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;
  left: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}
@media screen and (min-width: 1367px) {
.introduction_inner li:before {
  background-size: 23px;
  height: 42px;
  left: 10px;
  width: 42px;
}
}

.introduction_inner li:nth-child(1):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/icon_operation.png); }
.introduction_inner li:nth-child(2):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/icon_inquiry.png); }
.introduction_inner li:nth-child(3):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/icon_sales.png); }

.escort_scroll {
  position: relative;
  text-align: center;
}

.escort_scroll:before,
.escort_scroll:after {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.escort_scroll:before {
  color: #fff;
  content: 'SCROLL';
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  top: -2.2em;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.escort_scroll:before {
  font-size: 14px;
  line-height: 1.3;
  top: -3em;
}
}
@media screen and (min-width: 1367px) {
.escort_scroll:before {
  font-size: 21px;
  line-height: 1.3;
  top: -56px;
}
}

.escort_scroll:after {
  animation: scrollLine 1.8s ease-in-out infinite;
  background: linear-gradient(to bottom, #fff, #ced2e8);
  content: '';
  display: block;
  height: 40px;
  top: -.4em;
  width: 1px;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.escort_scroll:after {
  height: 40px;
  top: -15px;
}
}
@media screen and (min-width: 1367px) {
.escort_scroll:after {
  height: 70px;
  top: -15px;
}
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.introduction_text { width: 100%; }
@media screen and (max-width: 414px) {
.introduction_text { padding-top: 3em; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.introduction_text {
  left: 0;
  position: absolute;
  top: 240px;
}
}
@media screen and (min-width: 1367px) {
.introduction_text {
  left: 0;
  position: absolute;
  top: 500px;
}
}

.introduction_text p {
  font-weight: 500;
  line-height: 1.8;
}
@media screen and (max-width: 414px) {
.introduction_text p {
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.introduction_text p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 auto;
  width: 90%;
}
}
@media screen and (min-width: 1367px) {
.introduction_text p {
  font-size: 22px;
  line-height: 1.8;
  margin: 0 auto;
  max-width: 1399px;
  width: 80%;
}
}

.sales-copy {
  padding-top: 1.5em;
  text-align: center;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.sales-copy { padding-top: 50px; }
}
@media screen and (min-width: 1367px) {
.sales-copy { padding-top: 100px; }
}

.sales-copy p:nth-child(1) {
  color: var(--blue);
  font-size: 20px;
  font-weight: 600;
}
@media screen and (min-width: 1367px) {
.sales-copy p:nth-child(1) {
  font-size: 42px;
  line-height: 1.35;
}
}

.sales-copy p:nth-child(2) {
  font-size: 14px;
  line-height: 1.6;
}
@media screen and (min-width: 1367px) {
.sales-copy p:nth-child(2) {
  font-size: 24px;
  line-height: 1.6;
  margin-top: 20px;
}
}



/* article ------------- */
.article { width: 100%; }

.article.type01 {
  background-color: var(--skyblue);
  border-radius: 70px 0 0 0;
}
@media screen and (min-width: 1367px) {
.article.type01 { margin-top: 100px; }
}

.article.type02 {
  background-color: #fff;
  border-radius: 0 70px 0 0;
}
@media screen and (min-width: 1367px) {}



/* section ------------- */
.section {
  background-repeat: no-repeat;
  background-size: 200px;
  margin: 70px auto 0;
  padding-top: 50px;
  position: relative;
  width: 95%;
}
@media screen and (min-width: 1367px) {
.section {
  background-size: inherit;
  margin-top: 100px;
  padding-top: 100px;
  width: 1400px;
}
}

.section.section_problem {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/bg-text_problem.png);
  background-position: right top;
}
@media screen and (max-width: 414px) {
.section.section_problem { padding-top: 6px; }
}

.section.section_about {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/bg-text_about.png);
  background-position: center top;
}
@media screen and (max-width: 414px) {
.section.section_about { padding-top: 42px; }
}

.section.section_merit {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/bg-text_merit.png);
  background-position: left top;
}

.section.section_features {
  background-color: #fff;
  border-radius: 10px;
  padding-top: 0;
  width: 90%;
}
@media screen and (min-width: 1367px) {
.section.section_features {
  border-radius: 50px;
  max-width: 1790px;
  padding-bottom: 95px;
  width: 90%;
}
}

.section.section_for-who {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/bg-text_for-who.png);
  background-position: left top;
  padding-top: 0;
}
@media screen and (max-width: 414px) {
.section.section_for-who {
  background-size: 100px;
  padding-top: 40px;
}
}

.section.section_how-to-start {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/bg-text_how-to-start.png);
  background-position: center top;
}
@media screen and (max-width: 414px) {
.section.section_how-to-start { padding-top: 20px; }
}

.section.section_faq {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/bg-text_faq.png);
  background-position: right top;
}
@media screen and (max-width: 414px) {
.section.section_faq {
  background-position: right 3em top;
  background-size: 100px;
  padding: 40px 0;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.section.section_faq { padding: 40px 0; }
}
@media screen and (min-width: 1367px) {
.section.section_faq { padding-bottom: 254px; }
}

.section_inner { position: relative; }
@media screen and (min-width: 1367px) {
.section_inner {
  margin: 0 auto;
  width: 1400px;
}
}

.section.section_features .section_inner {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/bg-text_features.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 200px;
}
@media screen and (max-width: 414px) {
.section.section_features .section_inner { padding: 30px 0; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.section.section_features .section_inner { padding: 30px 0; }
}
@media screen and (min-width: 1367px) {
.section.section_features .section_inner {
  background-position: right top;
  background-size: inherit;
  padding-top: 100px;
}
}

.section.section_merit .section-label_wrap,
.section.section_for-who .section-label_wrap,
.section.section_faq .section-label_wrap { text-align: center; }

.section_label {
  background-color: var(--skyblue);
  border-radius: 2em;
  color: var(--blue);
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 2em;
  padding: 0 .5em 0 2em;
  position: relative;
}
@media screen and (min-width: 1367px) {
.section_label {
  border-radius: 25px;
  font-size: 25px;
  line-height: 2em;
  padding: 0 22px 0 57px;
}
}

.section_label.bg-color_white { background-color: #fff; }

.section_label:before {
  background-color: var(--bluegreen);
  border-radius: 10px;
  content: '';
  display: block;
  height: 18px;
  left: .4em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
}
@media screen and (min-width: 1367px) {
.section_label:before {
  border-radius: 12px;
  height: 23px;
  left: 18px;
  width: 23px;
}
}

.section_heading { margin-top: 15px; }
@media screen and (min-width: 1367px) {
.section_heading { margin-top: 30px; }
}

.section.section_merit .section_heading,
.section.section_for-who .section_heading,
.section.section_faq .section_heading { text-align: center; }

.section_heading h2 {
  display: inline-block;
  border-left: 6px solid var(--bluegreen);
  font-size: 20px;
  font-weight: 600;
  padding-left: .4em;
}
@media screen and (min-width: 1367px) {
.section_heading h2 {
  border-left-width: 9px;
  font-size: 50px;
  line-height: 1.1;
  padding-left: 20px;
}
}

.section_heading h2 span { color: var(--blue); }
@media screen and (min-width: 1367px) {}

.section_sub-heading {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: .7em;
}
@media screen and (min-width: 1367px) {
.section_sub-heading {
  font-size: 28px;
  line-height: 1.4;
  margin-top: 35px;
}
}

.section.section_merit .section_sub-heading,
.section.section_for-who .section_sub-heading { text-align: center; }

.section_heading + p,
.section_sub-heading + p {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 1em;
}
@media screen and (min-width: 1367px) {
.section_heading + p,
.section_sub-heading + p {
  font-size: 24px;
  line-height: 1.6;
  margin-top: 35px;
}
}



/* problem ------------- */
.problem_list {
  display: flex;
  margin: 30px auto 0;
  width: 90%;
}
@media screen and (max-width: 414px) {
.problem_list {
  flex-wrap: wrap;
  justify-content: center;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.problem_list {
  justify-content: space-between;
  width: 100%;
}
}
@media screen and (min-width: 1367px) {
.problem_list {
  justify-content: space-between;
  margin-top: 60px;
  width: 1248px;
}
}

.problem_list li {
  border-radius: 33px;
  box-shadow: 0 0 26px #cddceb;
  display: block;
  text-align: center;
}
@media screen and (max-width: 414px) {
.problem_list li {
  height: 275px;
  padding: 15px 15px 20px;
  width: 275px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.problem_list li {
  padding: 15px 10px 20px;
  width: 32%;
}
}
@media screen and (min-width: 1367px) {
.problem_list li {
  height: 350px;
  padding: 32px 22px 22px;
  transition: .3s;
  width: 350px;
}
.problem_list li:hover { transform: translateY(-10px); }
}

@media screen and (max-width: 414px) {
.problem_list li:nth-child(n+2) { margin-top: 20px; }
}

.problem_list li figure {
  display: block;
  margin: 0 auto;
  max-width: 150px;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.problem_list li figure { max-width: 200px; }
}

.problem_list li figure img {
  display: block;
  height: auto;
  width: 100%;
}

.problem_list li span {
  color: var(--blue);
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 15px;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.problem_list li span { font-size: 15px; }
}
@media screen and (min-width: 1367px) {
.problem_list li span {
  font-size: 18px;
  margin-top: 20px;
}
}

.comment_cta {
  margin: 40px auto 0;
  text-align: center;
}
@media screen and (min-width: 1367px) {
.comment_cta { margin-top: 60px; }
}

.comment_cta p:nth-child(1) {
  color: var(--blue);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1367px) {
.comment_cta p:nth-child(1) {
  font-size: 40px;
  line-height: 1.25;
}
}

.text_marker { background: linear-gradient(transparent 80%, var(--yellow) 65%); }
@media screen and (min-width: 1367px) {}

.comment_cta p:nth-child(2) {
  font-size: 15px;
  line-height: 1.45;
  margin-top: 1em;
}
@media screen and (min-width: 1367px) {
.comment_cta p:nth-child(2) {
  font-size: 24px;
  line-height: 1.45;
  margin-top: 60px;
}
}



/* about ------------- */
.section_sub-heading + p + figure {
  display: block;
  margin: 0;
}
@media screen and (max-width: 414px) {
.section_sub-heading + p + figure {
  margin: 0 auto;
  width: 90%;
}
}
@media screen and (min-width: 415px) and (max-width: 1023px) {
.section_sub-heading + p + figure {
  position: absolute;
  right: 0;
  top: 180px;
  width: 30%;
}
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
.section_sub-heading + p + figure {
  position: absolute;
  right: 0;
  top: 110px;
  width: 30%;
}
}
@media screen and (min-width: 1367px) {
.section_sub-heading + p + figure {
  position: absolute;
  right: 0;
  top: 250px;
  width: 456px;
}
}

.section_sub-heading + p + figure img {
  display: block;
  height: auto;
  width: 100%;
}

@media screen and (max-width: 414px) {
.link-official-site_wrap { text-align: center; }
}

.link_official-site {
  color: var(--blue);
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  margin-top: 1em;
  padding-left: 1.2em;
  position: relative;
  text-decoration: none;
}
@media screen and (min-width: 1367px) {
.link_official-site {
  font-size: 24px;
  line-height: 1.6;
  margin-top: 35px;
  transition: .3s;
}
.link_official-site:hover {
  color: var(--blue);
  text-decoration: none;
}
}

.link_official-site:before,
.link_official-site:after {
  content: '';
  display: block;
  left: 0;
  position: absolute;
}

.link_official-site:before {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/arrow_blue.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 100%;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 1366px) {
.link_official-site:before {
  height: 10px;
  width: 16px;
}
}
@media screen and (min-width: 1367px) {
.link_official-site:before {
  height: 14px;
  right: 30px;
  transition: .3s;
  width: 25px;
}
}

@media screen and (min-width: 1367px) {
.link_official-site:after {
  background-color: var(--blue);
  bottom: -.2em;
  height: 2px;
  transition: .3s;
  width: 0;
}
.link_official-site:hover:after { width: 100%; }
}

.about_list { display: flex; }
@media screen and (max-width: 414px) {
.about_list {
  flex-wrap: wrap;
  margin: 30px auto 0;
  width: 90%;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.about_list {
  justify-content: space-between;
  margin-top: 50px;
}
}
@media screen and (min-width: 1367px) {
.about_list {
  justify-content: space-between;
  margin-top: 90px;
}
}

.about_list li {
  background-image: linear-gradient(181deg, rgba(83, 152, 224, 1), rgba(42, 117, 203, 1));
  border-radius: 20px;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 414px) {
.about_list li { padding: 50px 15px 30px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.about_list li {
  padding: 60px 13px 30px;
  width: 32%;
}
}
@media screen and (min-width: 1367px) {
.about_list li {
  padding: 115px 23px 60px;
  transition: .3s;
  width: 429px;
}
.about_list li:hover { transform: translateY(-10px); }
}

@media screen and (max-width: 414px) {
.about_list li:nth-child(n+2) { margin-top: 20px; }
}

.about_list li:before {
  color: #fff;
  content: '';
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 30px;
  font-weight: 500;
  left: 50%;
  line-height: 1;
  opacity: .8;
  position: absolute;
  top: 15px;
  text-align: center;
  transform: translateX(-50%);
}
@media screen and (min-width: 1367px) {
.about_list li:before {
  font-size: 60px;
  top: 32px;
}
}

.about_list li:nth-child(1):before { content: '01'; }
.about_list li:nth-child(2):before { content: '02'; }
.about_list li:nth-child(3):before { content: '03'; }

.about_list li h4 {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.about_list li h4 { min-height: 4em; }
}
@media screen and (min-width: 1367px) {
.about_list li h4 { font-size: 24px; }
}

.about_list li figure {
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 414px) {
.about_list li figure {
  border-radius: 90px;
  height: 180px;
  margin: 14px auto 0;
  width: 180px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.about_list li figure {
  border-radius: 90px;
  height: 180px;
  margin: 14px auto 0;
  width: 180px;
}
}
@media screen and (min-width: 1367px) {
.about_list li figure {
  border-radius: 125px;
  height: 250px;
  margin-top: 28px;
  width: 250px;
}
}

.about_list li figure img {
  display: block;
  height: auto;
  width: 100%;
}

.about_list li span {
  color: #fff;
  display: block;
}
@media screen and (max-width: 414px) {
.about_list li span {
  font-size: 14px;
  margin-top: 15px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.about_list li span {
  font-size: 14px;
  margin-top: 15px;
  text-align: left;
}
}
@media screen and (min-width: 1367px) {
.about_list li span {
  font-size: 20px;
  line-height: 1.35;
  margin-top: 33px;
}
}



/* merit ------------- */
.merit_list {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 414px) {
.merit_list {
  margin: 30px auto 0;
  width: 90%;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.merit_list {
  gap: 1em;
  justify-content: center;
  margin-top: 30px;
  width: 100%;
}
}
@media screen and (min-width: 1367px) {
.merit_list {
  gap: 40px;
  justify-content: center;
  margin-top: 50px;
  width: 100%;
}
}

.merit_list li {
  background-color: #fff;
  border: 1px solid #ced2d8;
  border-radius: 20px;
  position: relative;
}
@media screen and (max-width: 414px) {
.merit_list li {
  padding: 70px 15px 20px;
  width: 100%;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.merit_list li {
  padding: 70px 20px 20px;
  width: 31%;
}
}
@media screen and (min-width: 1367px) {
.merit_list li {
  overflow: hidden;
  padding: 130px 27px 44px;
  position: relative;
  transition: .3s;
  width: 440px;
}
.merit_list li:hover { transform: translateY(-10px); }
}

@media screen and (max-width: 414px) {
.merit_list li:nth-child(n+2) { margin-top: 20px; }
}

.merit_list li:before,
.merit_list li:after {
  display: block;
  position: absolute;
}
@media screen and (max-width: 414px) {
.merit_list li:before { top: 20px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.merit_list li:before { top: 20px; }
}
@media screen and (min-width: 1367px) {
.merit_list li:before { top: 40px; }
}

.merit_list li:before {
  background-color: var(--skyblue);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 30px;
  border-radius: 10px;
  content: '';
  left: 15px;
}
@media screen and (max-width: 414px) {
.merit_list li:before {
  height: 40px;
  width: 40px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.merit_list li:before {
  height: 40px;
  width: 40px;
}
}
@media screen and (min-width: 1367px) {
.merit_list li:before {
  background-size: 40px;
  height: 67px;
  left: 30px;
  transition: .3s;
  width: 67px;
}
.merit_list li:hover:before { background-color: var(--blue); }
}

.merit_list li:nth-child(1):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/merit_01.png); }
.merit_list li:nth-child(2):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/merit_02.png); }
.merit_list li:nth-child(3):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/merit_03.png); }
.merit_list li:nth-child(4):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/merit_04.png); }
.merit_list li:nth-child(5):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/merit_05.png); }
@media screen and (min-width: 1367px) {
.merit_list li:nth-child(1):hover:before { background-image: url(/html/user_data/assets/img/lp/personarize-products/merit_01_white.png); }
.merit_list li:nth-child(2):hover:before { background-image: url(/html/user_data/assets/img/lp/personarize-products/merit_02_white.png); }
.merit_list li:nth-child(3):hover:before { background-image: url(/html/user_data/assets/img/lp/personarize-products/merit_03_white.png); }
.merit_list li:nth-child(4):hover:before { background-image: url(/html/user_data/assets/img/lp/personarize-products/merit_04_white.png); }
.merit_list li:nth-child(5):hover:before { background-image: url(/html/user_data/assets/img/lp/personarize-products/merit_05_white.png); }
}

@media screen and (min-width: 1367px) {
.merit_list li:after {
  background-color: var(--blue);
  bottom: 0;
  content: '';
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  transition: .3s;
  width: 0;
}
.merit_list li:hover:after { width: 100%; }
}

.merit_list li div {
  color: var(--blue);
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  position: absolute;
  right: 15px;
}
@media screen and (max-width: 414px) {
.merit_list li div { top: 20px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.merit_list li div { top: 20px; }
}
@media screen and (min-width: 1367px) {
.merit_list li div {
  font-size: 67px;
  right: 30px;
  top: 45px;
}
}

.merit_list li h4 {
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
@media screen and (max-width: 414px) {
.merit_list li h4 { text-align: center; }
}
@media screen and (min-width: 1367px) {
.merit_list li h4 {
  font-size: 24px;
  line-height: 1.4;
}
}

.merit_list li span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 1em;
}
@media screen and (min-width: 1367px) {
.merit_list li span { font-size: 17px; }
}



/* features ------------- */
.tab_menu {
  background-color: var(--skyblue);
  border-radius: 20px;
  margin-top: 30px;
}
@media screen and (min-width: 1367px) {
.tab_menu {
  border-radius: 40px;
  height: 78px;
}
}

.tab-list_wrap {
  display: flex;
  width: 100%;
}

.tab_list {
  border-radius: 20px;
  color: #747a80;
  cursor: pointer;
  font-size: 15px;
  line-height: 40px;
  text-align: center;
  width: 33%;
}
@media screen and (max-width: 320px) {
.tab_list { font-size: 13px; }
}
@media screen and (min-width: 1367px) {
.tab_list {
  border-radius: 40px;
  font-size: 23px;
  font-weight: 600;
  line-height: 78px;
  transition: .6s;
  width: 481px;
}
.tab_list:hover {
  background-image: linear-gradient(90deg, rgba(83, 152, 224, 1), rgba(42, 117, 203, 1));
  color: #fff;
}
}

.tab_list.is_active {
  background-image: linear-gradient(90deg, rgba(83, 152, 224, 1), rgba(42, 117, 203, 1));
  color: #fff;
}
@media screen and (min-width: 1367px) {}

.tab_main {
  display: none;
  margin: 20px auto 0;
  width: 95%;
}
@media screen and (max-width: 414px) {
.tab_main {
  flex-wrap: wrap;
  gap: .5em 0;
  justify-content: space-between;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.tab_main {
  flex-wrap: wrap;
  gap: .5em;
  justify-content: center;
}
}
@media screen and (min-width: 1367px) {
.tab_main {
  gap: 50px;
  justify-content: center;
  margin-top: 40px;
  width: 1314px;
}
}

.tab_main.is_active { display: flex; }

.tab_main li {
  background-color: var(--skyblue);
  border-radius: 20px;
  position: relative;
  padding: 75px 10px 20px;
}
@media screen and (max-width: 414px) {
.tab_main li { width: 49%; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.tab_main li { width: 48%; }
}
@media screen and (min-width: 1367px) {
.tab_main li {
  border-radius: 20px;
  overflow: hidden;
  padding: 167px 25px 25px;
  position: relative;
  transition: .3s;
  width: 291px;
}
.tab_main li:hover { transform: translateY(-10px); }
}

@media screen and (min-width: 1367px) {
.tab_main li:after {
  background-color: var(--blue);
  bottom: 0;
  content: '';
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  transition: .3s;
  width: 0;
}
.tab_main li:hover:after { width: 100%; }
}

.tab_main li:before {
  background-color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 30px;
  border-radius: 25px;
  content: '';
  display: block;
  height: 50px;
  left: 50%;
  position: absolute;
  top: 15px;
  transform: translateX(-50%);
  width: 50px;
}
@media screen and (min-width: 1367px) {
.tab_main li:before {
  background-size: 50px;
  border-radius: 53px;
  height: 106px;
  top: 36px;
  width: 106px;
}
}

.tab_main.main_hanbai li:nth-child(1):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_hanbai_01.png); }
.tab_main.main_hanbai li:nth-child(2):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_hanbai_02.png); }
.tab_main.main_hanbai li:nth-child(3):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_hanbai_03.png); }
.tab_main.main_hanbai li:nth-child(4):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_hanbai_04.png); }

.tab_main.main_order li:nth-child(1):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_order_01.png); }
.tab_main.main_order li:nth-child(2):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_order_02.png); }
.tab_main.main_order li:nth-child(3):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_order_03.png); }
.tab_main.main_order li:nth-child(4):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_order_04.png); }

.tab_main.main_operation li:nth-child(1):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_operation_01.png); }
.tab_main.main_operation li:nth-child(2):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_operation_02.png); }
.tab_main.main_operation li:nth-child(3):before { background-image: url(/html/user_data/assets/img/lp/personarize-products/features_operation_03.png); }

.tab_main li h3 {
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
@media screen and (min-width: 1367px) {
.tab_main li h3 {
  font-size: 22px;
  line-height: 1;
}
}

.tab_main li span {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  margin-top: 1em;
}
@media screen and (min-width: 1367px) {
.tab_main li span {
  font-size: 18px;
  margin-top: 22px;
}
}



/* for-who ------------- */
.for-who_list { display: flex; }
@media screen and (max-width: 414px) {
.for-who_list {
  flex-wrap: wrap;
  margin: 30px auto 0;
  width: 90%;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.for-who_list {
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30px auto 0;
}
}
@media screen and (min-width: 1367px) {
.for-who_list {
  justify-content: space-between;
  margin-top: 60px;
}
}

.for-who_list li {
  background-image: linear-gradient(181deg, rgba(83, 152, 224, 1), rgba(42, 117, 203, 1));
  border-radius: 20px;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 414px) {
.for-who_list li {
  padding: 30px 15px 30px;
  width: 100%;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.for-who_list li {
  padding: 30px 13px 30px;
  width: 32%;
}
}
@media screen and (min-width: 1367px) {
.for-who_list li {
  border-radius: 20px;
  padding: 44px 25px 60px;
  transition: .3s;
  width: 429px;
}
.for-who_list li:hover { transform: translateY(-10px); }
}

@media screen and (max-width: 414px) {
.for-who_list li:nth-child(n+2) { margin-top: 20px; }
}

.for-who_list li h4 {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
@media screen and (min-width: 1367px) {
.for-who_list li h4 { font-size: 24px; }
}

.for-who_list li figure {
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 414px) {
.for-who_list li figure {
  border-radius: 90px;
  height: 180px;
  margin: 14px auto 0;
  width: 180px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.for-who_list li figure {
  border-radius: 90px;
  height: 180px;
  margin: 14px auto 0;
  width: 180px;
}
}
@media screen and (min-width: 1367px) {
.for-who_list li figure {
  border-radius: 125px;
  height: 250px;
  margin: 28px auto 0;
  width: 250px;
}
}

.for-who_list li figure img {
  display: block;
  height: auto;
  width: 100%;
}

.for-who_list li span {
  color: #fff;
  display: block;
}
@media screen and (max-width: 320px) {
.for-who_list li span {
  font-size: 13px;
  margin-top: 15px;
}
}
@media screen and (min-width: 321px) and (max-width: 414px) {
.for-who_list li span {
  font-size: 14px;
  margin-top: 15px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.for-who_list li span {
  font-size: 14px;
  margin-top: 15px;
  text-align: left;
}
}
@media screen and (min-width: 1367px) {
.for-who_list li span {
  font-size: 20px;
  line-height: 1.35;
  margin-top: 33px;
}
}



/* how-to-start ------------- */
.how-to-start_flow {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
@media screen and (max-width: 414px) {
.how-to-start_flow {
  margin: 30px auto 0;
  width: 90%;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.how-to-start_flow {
  margin: 30px auto 0;
  width: 90%;
}
}
@media screen and (min-width: 1367px) {
.how-to-start_flow {
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-top: 113px;
}
}

.how-to-start_flow:before {
  background-color: var(--blue);
  content: '';
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
@media screen and (max-width: 1366px) {
.how-to-start_flow:before {
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 4px;
}
}

.how-to-start_flow div {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 11px #d0e0f2;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 414px) {
.how-to-start_flow div {
  padding: 10px 10px 10px 75px;
  width: 100%;
}
.how-to-start_flow div:nth-child(n+2) { margin-top: 30px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.how-to-start_flow div {
  padding: 20px 10px 20px 100px;
  width: 100%;
}
.how-to-start_flow div:nth-child(n+2) { margin-top: 30px; }
}
@media screen and (min-width: 1367px) {
.how-to-start_flow div {
  border-radius: 20px;
  padding: 147px 13px 30px;
  width: 312px;
}
}

.how-to-start_flow div:before,
.how-to-start_flow div:after {
  content: '';
  display: block;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
@media screen and (max-width: 1366px) {
.how-to-start_flow div:before,
.how-to-start_flow div:after {
  left: auto;
  transform: translateY(-50%);
  top: 50%;
}
}

.how-to-start_flow div:before {
  background-image: linear-gradient(180deg, rgba(83, 152, 224, 1), rgba(42, 117, 203, 1));
  z-index: 1;
}
@media screen and (max-width: 1366px) {
.how-to-start_flow div:before {
  border-radius: 30px;
  height: 60px;
  left: 10px;
  width: 60px;
}
}
@media screen and (min-width: 1367px) {
.how-to-start_flow div:before {
  background-size: 100%;
  border-radius: 82px;
  height: 163px;
  top: -53px;
  width: 163px;
}
}

.how-to-start_flow div:after {
  background-position: center center;
  background-repeat: no-repeat;
  background-size:;
  z-index: 2;
}
@media screen and (max-width: 1366px) {
.how-to-start_flow div:after {
  background-size: contain;
  height: 30px;
  left: 25px;
  width: 30px;
}
}
@media screen and (min-width: 1367px) {
.how-to-start_flow div:after {
  background-size: 66px;
  height: 66px;
  top: 0;
  width: 66px;
}
}

.how-to-start_flow div:nth-child(1):after { background-image: url(/html/user_data/assets/img/lp/personarize-products/how-to-start_01.png); }
.how-to-start_flow div:nth-child(2):after { background-image: url(/html/user_data/assets/img/lp/personarize-products/how-to-start_02.png); }
.how-to-start_flow div:nth-child(3):after { background-image: url(/html/user_data/assets/img/lp/personarize-products/how-to-start_03.png); }
.how-to-start_flow div:nth-child(4):after { background-image: url(/html/user_data/assets/img/lp/personarize-products/how-to-start_04.png); }

.flow_step {
  color: var(--blue);
  font-weight: 600;
}
@media screen and (max-width: 1366px) {
.flow_step {
  font-size: 14px;
  text-align: left;
}
}
@media screen and (min-width: 1367px) {
.flow_step { font-size: 18px; }
}

.how-to-start_flow h4 {
  color: var(--blue);
  font-weight: 600;
}
@media screen and (max-width: 1366px) {
.how-to-start_flow h4 {
  font-size: 16px;
  line-height: 1.37;
  margin-top: .3em;
  text-align: left;
}
}
@media screen and (min-width: 1367px) {
.how-to-start_flow h4 {
  font-size: 27px;
  margin-top: 14px;
}
}

.flow_sentence {
  font-size: 14px;
  line-height: 1.4;
}
@media screen and (max-width: 1366px) {
.flow_sentence {
  margin-top: .5em;
  text-align: left;
}
}
@media screen and (min-width: 1367px) {
.flow_sentence {
  font-size: 18px;
  line-height: 1.38;
  margin-top: 25px;
}
}

.cta_button {
  font-weight: 600;
  text-align: center;
}
@media screen and (max-width: 414px) {
.cta_button {
  font-size: 16px;
  line-height: 1.42;
  margin-top: 40px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.cta_button {
  font-size: 16px;
  line-height: 1.42;
  margin-top: 40px;
}
}
@media screen and (min-width: 1367px) {
.cta_button {
  font-size: 28px;
  line-height: 1.42;
  margin-top: 50px;
}
}

.cta_button .button { margin: 0 auto; }
@media screen and (max-width: 414px) {
.cta_button .button {
  height: 40px;
  margin-top: 20px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.cta_button .button {
  height: 50px;
  margin-top: 20px;
  width: 50%;
}
}
@media screen and (min-width: 1367px) {
.cta_button .button { margin-top: 60px; }
}

@media screen and (max-width: 414px) {
.cta_button .button span { font-size: 15px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.cta_button .button span { font-size: 16px; }
}



/* faq ------------- */
.faq { display: block; }
@media screen and (max-width: 414px) {
.faq {
  margin: 30px auto 0;
  width: 95%;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.faq {
  margin: 30px auto 0;
  width: 95%;
}
}
@media screen and (min-width: 1367px) {
.faq {
  margin-top: 60px;
  width: 100%;
}
}

.faq div {
  background-color: #fff;
  border: 1px solid var(--blue);
  border-radius: 20px;
  box-shadow: 0 0 20px #d8d8d8; 
}
@media screen and (max-width: 414px) {
.faq div { padding: 0 30px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.faq div { padding: 0 30px; }
}
@media screen and (min-width: 1367px) {
.faq div { padding: 0 50px; }
}

.faq div:nth-child(n+2) { margin-top: 20px; }

.faq-list_q {
  align-items: center;
  color: var(--blue);
  font-weight: 600;
  display: flex;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 414px) {
.faq-list_q {
  font-size: 15px;
  height: 60px;
  line-height: 1.36;
  padding: 0 15px 0 30px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.faq-list_q {
  font-size: 16px;
  height: 60px;
  line-height: 1.36;
  padding-left: 40px;
}
}
@media screen and (min-width: 1367px) {
.faq-list_q {
  cursor: pointer;
  font-size: 22px;
  height: 100px;
  padding-left: 73px;
}
}

.faq-list_q:before,
.faq-list_q:after {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.faq-list_q:before {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/icon_question.png);
  left: 0;
}
@media screen and (max-width: 414px) {
.faq-list_q:before {
  height: 20px;
  width: 20px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.faq-list_q:before {
  height: 30px;
  width: 30px;
}
}
@media screen and (min-width: 1367px) {
.faq-list_q:before {
  height: 45px;
  top: 50%;
  transform: traslateY(-50%);
  width: 45px;
}
}

.faq-list_q:after {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/icon_plus.png);
  right: 0;
}
@media screen and (max-width: 414px) {
.faq-list_q:after {
  height: 15px;
  width: 15px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.faq-list_q:after {
  height: 15px;
  width: 15px;
}
}
@media screen and (min-width: 1367px) {
.faq-list_q:after {
  height: 25px;
  transition: .6s;
  width: 25px;
}
}

.faq-list_q.switch-toggle-open:after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-list_a {
  border-top: 1px solid #d8d8d8;
  display: none;
}
@media screen and (max-width: 414px) {
.faq-list_a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  padding: 20px 0 18px 30px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.faq-list_a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  padding: 20px 0 18px 40px;
}
}
@media screen and (min-width: 1367px) {
.faq-list_a {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  padding: 26px 0 22px 73px;
}
}



/* contact ------------- */
.section_contact {
  background-image: linear-gradient(90deg, rgba(42, 117, 203, 1), rgba(83, 152, 224, 1));
  margin-top: 0;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 414px) {
.section_contact {
  background-size: 100%;
  padding: 40px 0;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.section_contact {
  background-size: 100%;
  padding: 40px 0;
}
}
@media screen and (min-width: 1367px) {
.section_contact { padding: 82px 0; }
}


.section-contact_heading {
  color: #fff;
  font-weight: 600;
  line-height: 1;
}
@media screen and (max-width: 414px) {
.section-contact_heading {
  font-size: 20px;
  margin-top: 15px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.section-contact_heading {
  font-size: 20px;
  margin-top: 15px;
}
}
@media screen and (min-width: 1367px) {
.section-contact_heading {
  font-size: 50px;
  line-height: 1.36;
  margin-top: 30px;
}
}

.section-contact_heading + p {
  color: #fff;
  font-weight: 600;
}
@media screen and (max-width: 414px) {
.section-contact_heading + p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  margin-top: 1em;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.section-contact_heading + p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  margin-top: 1em;
}
}
@media screen and (min-width: 1367px) {
.section-contact_heading + p {
  font-size: 28px;
  line-height: 1.4;
  margin-top: 30px;
}
}

.check-list {
  display: flex;
  margin: 0 auto;
}
@media screen and (max-width: 414px) {
.check-list {
  flex-wrap: wrap;
  margin: 20px auto 0;
  width: 70%;
}
}
@media screen and (min-width: 415px) and (max-width: 1023px) {
.check-list {
  justify-content: space-between;
  margin-top: 30px;
  width: 80%;
}
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
.check-list {
  justify-content: space-between;
  margin-top: 30px;
  width: 60%;
}
}
@media screen and (min-width: 1367px) {
.check-list {
  justify-content: space-between;
  margin-top: 30px;
  max-width: 730px;
  width: 100%;
}
}

.check-list li {
  color: #fff;
  font-weight: 500;
  display: inline-block;
  position: relative;
}
@media screen and (max-width: 414px) {
.check-list li {
  font-size: 15px;
  line-height: 20px;
  padding-left: 24px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.check-list li {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  padding-left: 24px;
}
}
@media screen and (min-width: 1367px) {
.check-list li {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  padding-left: 33px;
}
}

@media screen and (max-width: 414px) {
.check-list li:nth-child(n+2) { margin-top: 1em; }
}

.check-list li:before {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/icon_check.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 414px) {
.check-list li:before {
  height: 20px;
  width: 20px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.check-list li:before {
  height: 20px;
  width: 20px;
}
}
@media screen and (min-width: 1367px) {
.check-list li:before {
  height: 27px;
  width: 27px;
}
}

.cta_button.type_contact { margin-top: 30px; }
@media screen and (min-width: 1367px) {
.cta_button.type_contact { margin-top: 42px; }
}

.cta_button.type_contact .button { margin-top: 0; }
@media screen and (max-width: 414px) {
.cta_button.type_contact .button {
  height: 40px;
  padding-left: 20px;
  width: 80%;
}
}
@media screen and (min-width: 1367px) {
.cta_button.type_contact .button {
  height: 110px;
  width: 500px;
}
}

.cta_button.type_contact .button:before {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/icon_mail_white.png);
  content: '';
  height: 50px;
  left: 58px;
  width: 50px;
}
@media screen and (max-width: 414px) {
.cta_button.type_contact .button:before {
  height: 20px;
  left: 35px;
  width: 20px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.cta_button.type_contact .button:before {
  height: 20px;
  left: 75px;
  width: 20px;
}
}
@media screen and (min-width: 1367px) {
.cta_button.type_contact .button:hover:before { background-image: url(/html/user_data/assets/img/lp/personarize-products/icon_mail.png); }
}

.cta_button.type_contact .button:after { right: 80px; }
@media screen and (min-width: 1367px) {
.cta_button.type_contact .button:after { right: 80px; }
.cta_button.type_contact .button:hover:after { right: 70px; }
}



/* footer ------------- */
.footer { color: #4A5568; }
@media screen and (max-width: 414px) {
.footer { padding: 45px 0 15px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.footer { padding: 45px 0 15px; }
}
@media screen and (min-width: 1367px) {
.footer { padding: 95px 0 33px; }
}

.footer_grid {
  display: flex;
  margin: 0 auto;
}
@media screen and (max-width: 414px) {
.footer_grid {
  flex-wrap: wrap;
  width: 90%;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.footer_grid {
  justify-content: space-between;
  width: 95%;
}
}
@media screen and (min-width: 1367px) {
.footer_grid {
  justify-content: space-between;
  width: 1400px;
}
}

@media screen and (max-width: 414px) {
.footer-grid_list { width: 100%; }
}


@media screen and (max-width: 414px) {
.footer-grid_list:nth-child(n+2) { border-top: 1px solid #d6d6d6; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.footer-grid_list:nth-child(n+2) { border-left: 1px solid #d6d6d6; }
}
@media screen and (min-width: 1367px) {
.footer-grid_list:nth-child(n+2) { border-left: 1px solid #d6d6d6; }
}

@media screen and (max-width: 414px) {
.footer-grid_list:nth-child(1) { padding-bottom: 1em; }
.footer-grid_list:nth-child(2) { padding: 20px 0; }
.footer-grid_list:nth-child(3) { padding-top: 20px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.footer-grid_list:nth-child(1) {
  padding-right: 1em;
  width: 30%;
}
.footer-grid_list:nth-child(2) {
  padding: 0 1em;
  width: 50%;
}
.footer-grid_list:nth-child(3) {
  padding-left: 1em;
  width: 20%;
}
}
@media screen and (min-width: 1367px) {
.footer-grid_list:nth-child(1) { padding-right: 1em; }
.footer-grid_list:nth-child(2) { padding: 0 55px; }
.footer-grid_list:nth-child(3) { padding-left: 55px; }
}

.footer-grid_list a {
  color: #4a5568;
  text-decoration: none;
}
@media screen and (min-width: 1367px) {
.footer_grid a { transition: .6s; }
.footer_grid a:hover {}
}

.footer-grid_list a img {
  display: block;
  height: auto;
}
@media screen and (max-width: 414px) {
.footer-grid_list:nth-child(1) a img {
  margin: 0 auto;
  width: 50%;
}
.footer-grid_list:nth-child(3) a img { width: 70%; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.footer-grid_list:nth-child(1) a img { width: 50%; }
.footer-grid_list:nth-child(3) a img { width: 100%; }
}
@media screen and (min-width: 1367px) {
.footer_grid a:hover img { opacity: .6; }
}

@media screen and (max-width: 414px) {
.footer-grid_list p {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 1em;
  text-align: center;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.footer-grid_list p {
  font-size: 13px;
  margin-top: 1em;
}
}
@media screen and (min-width: 1367px) {
.footer-grid_list p {
  font-size: 17px;
  margin-top: 20px;
}
}

.footer-grid_list.inner-grid {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 414px) {
.footer-grid_list.inner-grid { justify-content: space-between; }
}
@media screen and (min-width: 1367px) {
.footer-grid_list.inner-grid { justify-content: space-between; }
}

.footer-grid_list h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.footer-grid_list h3 {
  font-size: 24px;
  line-height: 1.375;
}
}

@media screen and (max-width: 414px) {
.footer-grid_list ul { margin-top: 10px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.footer-grid_list ul { margin-top: 15px; }
}
@media screen and (min-width: 1367px) {
.footer-grid_list ul { margin-top: 15px; }
}

.footer-grid_list.inner-grid ul {
  display: block;
  width: 48%;
}

.footer_grid.inner-grid ul li { display: block; }
@media screen and (max-width: 414px) {
.footer-grid_list.inner-grid ul li {
  font-size: 15px;
  line-height: 1.35;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.footer-grid_list.inner-grid ul li {
  font-size: 13px;
  line-height: 1.35;
}
}
@media screen and (min-width: 1367px) {
.footer-grid_list.inner-grid ul li {
  font-size: 20px;
  line-height: 1.35;
}
}

.footer-grid_list ul li:nth-child(n+2) { margin-top: 15px; }
@media screen and (max-width: 414px) {
.footer-grid_list ul li:nth-child(n+2) { margin-top: .5em; }
}

.footer-grid_list ul li a {
  font-weight: 500;
  line-height: 1.35;
}
@media screen and (max-width: 320px) {
.footer-grid_list ul li a { font-size: 12px; }
}
@media screen and (min-width: 321px) and (max-width: 414px) {
.footer-grid_list ul li a { font-size: 13px; }
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.footer-grid_list ul li a { font-size: 13px; }
}
@media screen and (min-width: 1367px) {
.footer-grid_list ul li a {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  position: relative;
  transition: .3s;
}
}

@media screen and (min-width: 1367px) {
.footer-grid_list ul li a:after {
  background-color: #4a5568;
  bottom: -.2em;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  transition: .3s;
  width: 0;
}
.footer-grid_list ul li a:hover:after { width: 100%; }
.footer-grid_list ul li.no-underline a:after { display: none; }
}

.copyright {
  display: block;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 414px) {
.copyright {
  border-top: 1px solid #d6d6d6;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 20px;
  padding-top: 20px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.copyright {
  font-size: 12px;
  line-height: 1.35;
  margin-top: 20px;
}
}
@media screen and (min-width: 1367px) {
.copyright {
  font-size: 20px;
  line-height: 1.35;
  margin-top: 60px;
}
}



/* fixed cta ------------- */
.fixed-cta {
  align-items: center;
  background-color: var(--orange);
  color: #fff;
  display: flex;
  opacity: 0;
  position: fixed;
  right: 0;
  transition: .6s;
  text-decoration: none;
}
@media screen and (max-width: 414px) {
.fixed-cta {
  border-bottom: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
  border-right: none;
  border-top: 2px solid var(--orange);
  border-radius: 25px 0 0 25px;
  bottom: 60px;
  height: 40px;
  padding: 0 10px 0 15px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.fixed-cta {
  border-bottom: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
  border-right: none;
  border-top: 2px solid var(--orange);
  border-radius: 30px 0 0 30px;
  bottom: 95px;
  height: 60px;
  padding: 0 15px 0 20px;
}
}
@media screen and (min-width: 1367px) {
.fixed-cta {
  border-bottom: 3px solid var(--orange);
  border-left: 3px solid var(--orange);
  border-right: none;
  border-top: 3px solid var(--orange);
  border-radius: 40px 0 0 40px;
  bottom: 128px;
  height: 80px;
  padding: 0 20px 0 30px;
  transition: .3s;
}
}

.is-in .fixed-cta { opacity: 1; }

@media screen and (min-width: 1367px) {
.fixed-cta:hover {
  background-color: #fff;
  color: var(--orange);
  transform: translateY(-5px);
}
}

.fixed-cta span {
  display: inline-block;
  font-weight: 600;
  position: relative;
}
@media screen and (max-width: 414px) {
.fixed-cta span {
  font-size: 15px;
  line-height: 22px;
  padding-left: 27px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.fixed-cta span {
  font-size: 16px;
  line-height: 32px;
  padding-left: 42px;
}
}
@media screen and (min-width: 1367px) {
.fixed-cta span {
  font-size: 20px;
  line-height: 42px;
  padding-left: 62px;
}
}

.fixed-cta span:before {
  background-image: url(/html/user_data/assets/img/lp/personarize-products/icon_mail_white.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 414px) {
.fixed-cta span:before {
  height: 22px;
  width: 22px;
}
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.fixed-cta span:before {
  height: 32px;
  width: 32px;
}
}
@media screen and (min-width: 1367px) {
.fixed-cta span:before {
  height: 42px;
  width: 42px;
}
}

@media screen and (min-width: 1367px) {
.fixed-cta:hover span:before { background-image: url(/html/user_data/assets/img/lp/personarize-products/icon_mail.png); }
}



/* page backhead ------------- */
.page_backhead {
  align-items: center;
  background-color: #585f69;
  background-image: url(/html/user_data/assets/img/lp/personarize-products/arrow-up_white.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20px;
  border: 2px solid #585f69;
  border-radius: 50%;
  bottom: 10px;
  display: flex;
  height: 40px;
  justify-content: center;
  opacity: 0;
  position: fixed;
  right: 10px;
  transition: .6s;
  width: 40px;
  z-index: 2;
}
@media screen and (min-width: 415px) and (max-width: 1366px) {
.page_backhead {
  background-size: 30px;
  bottom: 20px;
  height: 60px;
  right: 20px;
  width: 60px;
}
}
@media screen and (min-width: 1367px) {
.page_backhead {
  background-size: 32px;
  border-width: 3px;
  bottom: 30px;
  height: 78px;
  right: 30px;
  transition: .3s;
  width: 78px;
}
.page_backhead:hover {
  background-color: #fff;
  background-image: url(/html/user_data/assets/img/lp/personarize-products/arrow-up_gray.png);
  background-position: center top 1em;
}
}

.is-in .page_backhead { opacity: 1; }



/* device ------------- */
.sp-only,
.sp-tab-only { display: block !important; }
br.sp-only,
br.sp-tab-only,
span.sp-only,
span.sp-tab-only { display: inline !important; }
.sh-nav-link-inner.sp-tab-only { display: flex !important; }
.pc-only,
.tab-only,
.pc-tab-only { display: none !important; }
@media screen and (min-width: 1367px) {
.pc-only,
.pc-tab-only { display: block !important; }
br.pc-only,
br.pc-tab-only,
span.pc-only,
span.pc-tab-only { display: inline !important; }
br.sp-only,
br.sp-tab-only { display: none !important; }
.sp-only,
.tab-only,
.sp-tab-only { display: none !important; }
}
@media only screen and (min-width: 768px) and (max-width: 1366px) {
.tab-only,
.pc-tab-only,
.sp-tab-only { display: block !important; }
br.tab-only,
br.pc-tab-only,
br.sp-tab-only,
span.tab-only,
span.pc-tab-only,
span.sp-tab-only { display: inline !important; }
br.pc-only,
br.sp-only { display: none !important; }
.pc-only,
.sp-only { display: none !important; }
}
















@media screen and (min-width: 1367px) {}
@media screen and (min-width: 1025px) {}
@media screen and (min-width: 768px) {}